<!DOCTYPE html><html lang="en"><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="CR" name="w3c-status">
  <title>HTML 5.1: 4.2. Document metadata</title>
  <link href="styles/styles-html.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href=styles.default.css>
  <meta content="Bikeshed 1.0.0" name="generator">

  <link href="styles/W3C-CR" rel="stylesheet" type="text/css">
 </head>
 <body class="h-entry">
  <div class="head">
   <header>
    <p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="styles/logos/W3C" width="72"></a></p>
    <h1 class="p-name no-ref allcaps" id="title">HTML 5.1</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation, <time class="dt-updated" datetime="2016-06-21">21 June 2016</time></span></h2>
   </header>
   
   
   
   
  </div>
  
  
  
  
  
  <nav data-fill-with="table-of-contents" id="toc"><p class="prev_next">← <a href="semantics.html#semantics"><span class="secno">4</span> <span class="content">The elements of HTML</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="sections.html#sections"><span class="secno">4.3</span> <span class="content">Sections</span></a> →</p>
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory"><li>
       <a href="document-metadata.html#document-metadata"><span class="secno">4.2</span> <span class="content">Document metadata</span></a>
       <ol class="toc">
        <li><a href="document-metadata.html#the-head-element"><span class="secno">4.2.1</span> <span class="content">The <span><code>head</code></span> element</span></a>
        </li><li><a href="document-metadata.html#the-title-element"><span class="secno">4.2.2</span> <span class="content">The <span><code>title</code></span> element</span></a>
        </li><li><a href="document-metadata.html#the-base-element"><span class="secno">4.2.3</span> <span class="content">The <span><code>base</code></span> element</span></a>
        </li><li><a href="document-metadata.html#the-link-element"><span class="secno">4.2.4</span> <span class="content">The <span><code>link</code></span> element</span></a>
        </li><li>
         <a href="document-metadata.html#the-meta-element"><span class="secno">4.2.5</span> <span class="content">The <span><code>meta</code></span> element</span></a>
         <ol class="toc">
          <li><a href="document-metadata.html#standard-metadata-names"><span class="secno">4.2.5.1</span> <span class="content">Standard metadata names</span></a>
          </li><li><a href="document-metadata.html#other-metadata-names"><span class="secno">4.2.5.2</span> <span class="content">Other metadata names</span></a>
          </li><li><a href="document-metadata.html#pragma-directives"><span class="secno">4.2.5.3</span> <span class="content">Pragma directives</span></a>
          </li><li><a href="document-metadata.html#other-pragma-directives"><span class="secno">4.2.5.4</span> <span class="content">Other pragma directives</span></a>
          </li><li><a href="document-metadata.html#specifying-the-documents-character-encoding"><span class="secno">4.2.5.5</span> <span class="content">Specifying the document’s character encoding</span></a>
         </li></ol>
        </li><li><a href="document-metadata.html#the-style-element"><span class="secno">4.2.6</span> <span class="content">The <span><code>style</code></span> element</span></a>
        </li><li><a href="document-metadata.html#interactions-of-styling-and-scripting"><span class="secno">4.2.7</span> <span class="content">Interactions of styling and scripting</span></a>
       </li></ol>
      </li></ol>
  </nav><main><section>
     <h3 class="heading settled" data-level="4.2" id="document-metadata"><span class="secno">4.2. </span><span class="content">Document metadata</span><a class="self-link" href="document-metadata.html#document-metadata"></a></h3>
     <h4 class="heading settled" data-level="4.2.1" id="the-head-element"><span class="secno">4.2.1. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-head"><code>head</code></dfn> element</span><a class="self-link" href="document-metadata.html#the-head-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-3">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-2">Contexts in which this element can be used</a>:
      </dt><dd>As the first element in an <code><a data-link-type="element" href="semantics.html#elementdef-html" id="ref-for-elementdef-html-20">html</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-5">Content model</a>:
      </dt><dd> If the document is <a data-link-type="dfn" href="semantics-embedded-content.html#iframe-iframe-srcdoc-document" id="ref-for-iframe-iframe-srcdoc-document-4">an <code>iframe</code> <code>srcdoc</code> document</a> or if title
      information is available from a higher-level protocol: Zero or more elements of <a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-2">metadata content</a>, of which no more than one is a <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-12"><code>title</code></a> element and no more
      than one is a <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-5">base</a></code> element. 
      </dd><dd> Otherwise: One or more elements of <a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-3">metadata content</a>, of which exactly one is a <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-13"><code>title</code></a> element and no more than one is a <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-6">base</a></code> element. 
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-2">Tag omission in text/html</a>:
      </dt><dd> A <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-13">head</a></code> element’s <a data-link-type="dfn" href="syntax.html#start-tag" id="ref-for-start-tag-4">start tag</a> may be omitted if the element is empty, or if
      the first thing inside the <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-14">head</a></code> element is an element. 
      </dd><dd> A <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-15">head</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-5">end tag</a> may be omitted if the <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-16">head</a></code> element
      is not immediately followed by a <a data-link-type="dfn" href="infrastructure.html#space-characters" id="ref-for-space-characters-30">space character</a> or a <a data-link-type="dfn" href="syntax.html#comment" id="ref-for-comment-3">comment</a>. 
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-3">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-2">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd>None
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-4">Global aria-* attributes</a>
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-2">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLHeadElement" data-dfn-type="interface" data-export="" id="htmlheadelement-htmlheadelement">HTMLHeadElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-12">HTMLElement</a> {};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-17">head</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-5">represents</a> a collection of metadata for the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>.</p>
     <div class="example" id="example-a1f7386b">
      <a class="self-link" href="document-metadata.html#example-a1f7386b"></a> The collection of metadata in a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-18">head</a></code> element can be large or small. Here is an
    example of a very short one: 
<pre class="highlight"><span class="cp">&lt;!doctype html&gt;</span>
<span class="nt">&lt;html&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>A document with a short head<span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
    ...
</pre>
      <p>Here is an example of a longer one:</p>
<pre class="highlight"><span class="cp">&lt;!DOCTYPE HTML&gt;</span>
  <span class="nt">&lt;HTML&gt;</span>
  <span class="nt">&lt;HEAD&gt;</span>
    <span class="nt">&lt;META</span> <span class="na">CHARSET=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;BASE</span> <span class="na">HREF=</span><span class="s">"https://www.example.com/"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;TITLE&gt;</span>An application with a long head<span class="nt">&lt;/TITLE&gt;</span>
    <span class="nt">&lt;LINK</span> <span class="na">REL=</span><span class="s">"STYLESHEET"</span> <span class="na">HREF=</span><span class="s">"default.css"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;LINK</span> <span class="na">REL=</span><span class="s">"STYLESHEET ALTERNATE"</span> <span class="na">HREF=</span><span class="s">"big.css"</span> <span class="na">TITLE=</span><span class="s">"Big Text"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;SCRIPT </span><span class="na">SRC=</span><span class="s">"support.js"</span><span class="nt">&gt;&lt;/SCRIPT&gt;</span>
    <span class="nt">&lt;META</span> <span class="na">NAME=</span><span class="s">"APPLICATION-NAME"</span> <span class="na">CONTENT=</span><span class="s">"Long headed application"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/HEAD&gt;</span>
  <span class="nt">&lt;BODY&gt;</span>
    ...
</pre>
     </div>
     <p class="note" role="note"> The <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-14"><code>title</code></a> element is a required child in most situations, but when a higher-level
    protocol provides title information, e.g., in the Subject line of an e-mail when HTML is used as
    an e-mail authoring format, the <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-15"><code>title</code></a> element can be omitted. </p>
     <p class="note" role="note"> It is recommended to keep the usage of attributes and their values defined on the <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-19">head</a></code> element to a minimum to allow for proper detection of the <a data-link-type="dfn" href="document-metadata.html#character-encoding-declaration" id="ref-for-character-encoding-declaration-2">character encoding declaration</a> within the first 1024 bytes. </p>
     <h4 class="heading settled" data-level="4.2.2" id="the-title-element"><span class="secno">4.2.2. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-title"><code>title</code></dfn> element</span><a class="self-link" href="document-metadata.html#the-title-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-4">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-4">Metadata content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-3">Contexts in which this element can be used</a>:
      </dt><dd>In a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-20">head</a></code> element containing no other <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-16"><code>title</code></a> elements.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-6">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#text" id="ref-for-text-9">Text</a> that is not <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-9">inter-element whitespace</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-3">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-4">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-3">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd>None
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-5">Global aria-* attributes</a>
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-3">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-hightlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLTitleElement" data-dfn-type="interface" data-export="" id="htmltitleelement-htmltitleelement">HTMLTitleElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-13">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmltitleelement-text" id="ref-for-dom-htmltitleelement-text-1">text</a>;
};
</pre>
     </dd></dl>
     <p>The <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-17"><code>title</code></a> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-6">represents</a> the document’s title or name. Authors should use
  titles that identify their documents even when they are used out of context, for example in a
  user’s history or bookmarks, or in search results. The document’s title is often different from
  its first heading, since the first heading does not have to stand alone when taken out of context.</p>
     <p>There must be no more than one <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-18"><code>title</code></a> element per document.</p>
     <p class="note" role="note"> If it’s reasonable for the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> to have no title, then the <code>title</code> element is probably not required. See the <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-21">head</a></code> element’s content model for a
    description of when the element is required. </p>
     <dl class="domintro">
      <dt><var>title</var> . <code>text</code> [ = <var>value</var> ]
      </dt><dd>
        Returns the contents of the element, ignoring child nodes that aren’t <code>Text</code> nodes. 
       <p>Can be set, to replace the element’s children with the given value.</p>
     </dd></dl>
     <div class="impl"> The IDL attribute <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTitleElement" data-dfn-type="attribute" data-export="" id="dom-htmltitleelement-text"><code>text</code></dfn> must return a concatenation of the contents of
    all the <code>Text</code> nodes that are children of the <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-19"><code>title</code></a> element (ignoring
    any other nodes such as comments or elements), in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-19">tree order</a>. On setting, it must act the
    same way as the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> IDL attribute. </div>
     <div class="example" id="example-4cadb6ac">
      <a class="self-link" href="document-metadata.html#example-4cadb6ac"></a> Here are some examples of appropriate titles, contrasted with the top-level headings that
    might be used on those same pages. 
<pre class="highlight"><span class="nt">&lt;title&gt;</span>Introduction to The Mating Rituals of Bees<span class="nt">&lt;/title&gt;</span>
...
<span class="nt">&lt;h1&gt;</span>Introduction<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;p&gt;</span>This companion guide to the highly successful
<span class="nt">&lt;cite&gt;</span>Introduction to Medieval Bee-Keeping<span class="nt">&lt;/cite&gt;</span> book is...
</pre>
      <p>The next page might be a part of the same site. Note how the title describes the subject matter
    unambiguously, while the first heading assumes the reader knows what the context is and
    therefore won’t wonder if the dances are Salsa or Waltz:</p>
<pre class="highlight"><span class="nt">&lt;title&gt;</span>Dances used during bee mating rituals<span class="nt">&lt;/title&gt;</span>
...
<span class="nt">&lt;h2&gt;</span>The Dances<span class="nt">&lt;/h2&gt;</span>
</pre>
     </div>
     <p>The string to use as the document’s title is given by the <code>document.title</code> IDL
  attribute.</p>
     <div class="impl"> User agents should use the document’s title when referring to the document in their user
    interface. When the contents of a <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-20"><code>title</code></a> element are used in this way, <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-19">the directionality</a> of that <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-21"><code>title</code></a> element should be used to set the
    directionality of the document’s title in the user interface. </div>
     <h4 class="heading settled" data-level="4.2.3" id="the-base-element"><span class="secno">4.2.3. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-base"><code>base</code></dfn> element</span><a class="self-link" href="document-metadata.html#the-base-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-5">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-5">Metadata content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-4">Contexts in which this element can be used</a>:
      </dt><dd>In a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-22">head</a></code> element containing no other <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-7">base</a></code> elements.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-7">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#nothing" id="ref-for-nothing-1">Nothing</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-4">Tag omission in text/html</a>:
      </dt><dd>No end tag.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-5">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-4">Global attributes</a>
      </dd><dd><code>href</code> — <a data-link-type="dfn" href="infrastructure.html#document-base-url" id="ref-for-document-base-url-6">Document base URL</a>
      </dd><dd> <code>target</code> — Default <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-15">browsing context</a> for <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-3">hyperlink</a> <a data-link-type="dfn" href="browsers.html#navigated" id="ref-for-navigated-8">navigation</a> and <a href="sec-forms.html#forms-form-submission">§4.10.22 Form submission</a> 
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd>None
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-6">Global aria-* attributes</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-4">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLBaseElement" data-dfn-type="interface" data-export="" id="htmlbaseelement-htmlbaseelement">HTMLBaseElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-14">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmlbaseelement-href" id="ref-for-dom-htmlbaseelement-href-1">href</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmlbaseelement-target" id="ref-for-dom-htmlbaseelement-target-1">target</a>;
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-8">base</a></code> element allows authors to specify the <a data-link-type="dfn" href="infrastructure.html#document-base-url" id="ref-for-document-base-url-7">document base URL</a> for the
  purposes of <a data-link-type="dfn" href="infrastructure.html#reparsed" id="ref-for-reparsed-7">parsing relative URLs</a>, and the name of the default <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-16">browsing context</a> for the purposes of <a data-link-type="dfn" href="links.html#follow-hyperlinks" id="ref-for-follow-hyperlinks-1">following hyperlinks</a>. The element does not <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-7">represent</a> any content
  beyond this information.</p>
     <p>There must be no more than one <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-9">base</a></code> element per document.</p>
     <p>A <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-10">base</a></code> element must have either an <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-base-href" id="ref-for-element-attrdef-base-href-3">href</a></code> attribute, a <code>target</code> attribute, or both.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="base" data-dfn-type="element-attr" data-export="" id="element-attrdef-base-href"><code>href</code></dfn> content attribute, if specified, must
  contain a <a data-link-type="dfn" href="infrastructure.html#valid-url-potentially-surrounded-by-spaces" id="ref-for-valid-url-potentially-surrounded-by-spaces-1">valid URL potentially surrounded by spaces</a>.</p>
     <p>A <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-11">base</a></code> element, if it has an <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-base-href" id="ref-for-element-attrdef-base-href-4">href</a></code> attribute, must come before any other elements in
  the tree that have attributes defined as taking <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-url">URLs</a> except the <code><a data-link-type="element" href="semantics.html#elementdef-html" id="ref-for-elementdef-html-21">html</a></code> element.</p>
     <div class="impl">
      <p class="note" role="note"> If there are multiple <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-12">base</a></code> elements with <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-base-href" id="ref-for-element-attrdef-base-href-5">href</a></code> attributes, all but
      the first are ignored. </p>
     </div>
     <p>The <dfn class="dfn-paneled" data-dfn-for="base" data-dfn-type="element-attr" data-export="" id="element-attrdef-base-target"><code>target</code></dfn> attribute, if specified, must contain a <a data-link-type="dfn" href="browsers.html#valid-browsing-context-names-or-keywords" id="ref-for-valid-browsing-context-names-or-keywords-1">valid browsing
  context name or keyword</a>, which specifies which <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-17">browsing context</a> is to be used as the
  default when <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-4">hyperlinks</a> and <a data-link-type="dfn" href="sec-forms.html#forms" id="ref-for-forms-1">forms</a> in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> cause <a data-link-type="dfn" href="browsers.html#navigated" id="ref-for-navigated-9">navigation</a>.</p>
     <p>A <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-13">base</a></code> element, if it has a <code>target</code> attribute, must come before any
  elements in the tree that represent <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-5">hyperlinks</a>.</p>
     <div class="impl">
      <p class="note" role="note"> If there are multiple <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-14">base</a></code> elements with <code>target</code> attributes, all but
      the first are ignored. </p>
      <p>A <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-15">base</a></code> element that is the first <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-16">base</a></code> element with an <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-base-href" id="ref-for-element-attrdef-base-href-6">href</a></code> content attribute in a particular <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="frozen-base-url">frozen base URL</dfn>. The <a data-link-type="dfn" href="document-metadata.html#frozen-base-url" id="ref-for-frozen-base-url-2">frozen base URL</a> must be <a data-link-type="dfn" href="infrastructure.html#immediately" id="ref-for-immediately-1">immediately</a> <a data-link-type="dfn" href="document-metadata.html#set-the-frozen-base-url" id="ref-for-set-the-frozen-base-url-1">set</a> for an element whenever any of the following situations
    occur:</p>
      <ul>
       <li data-md="">
        <p>The <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-17">base</a></code> element becomes the first <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-18">base</a></code> element in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-20">tree order</a> with an <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-base-href" id="ref-for-element-attrdef-base-href-7">href</a></code> content attribute in its <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>.</p>
       </li><li data-md="">
        <p>The <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-19">base</a></code> element is the first <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-20">base</a></code> element in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-21">tree order</a> with
an <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-base-href" id="ref-for-element-attrdef-base-href-8">href</a></code> content attribute in its <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>, and its <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-base-href" id="ref-for-element-attrdef-base-href-9">href</a></code> content attribute is changed.</p>
      </li></ul>
      <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="set-the-frozen-base-url">set the frozen base URL</dfn>, for an element <var>element</var>:</p>
      <ol>
       <li data-md="">
        <p>Let <var>document</var> be <var>element</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>.</p>
       </li><li data-md="">
        <p>Let <var>urlRecord</var> be the result of <a data-link-type="dfn" href="infrastructure.html#reparsed" id="ref-for-reparsed-8">parsing</a> the value of <var>element</var>’s <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-base-href" id="ref-for-element-attrdef-base-href-10">href</a></code> content attribute with <var>document</var>’s <a data-link-type="dfn" href="infrastructure.html#fallback-base-url" id="ref-for-fallback-base-url-2">fallback base URL</a>, and <var>document</var>’s <a data-link-type="dfn" href="infrastructure.html#character-encoding" id="ref-for-character-encoding-4">character encoding</a>. (Thus the <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-21">base</a></code> element isn’t affected by itself.)</p>
       </li><li data-md="">
        <p>Set <var>elements</var>’s <a data-link-type="dfn" href="document-metadata.html#frozen-base-url" id="ref-for-frozen-base-url-3">frozen base URL</a> to <var>document</var>’s <a data-link-type="dfn" href="infrastructure.html#fallback-base-url" id="ref-for-fallback-base-url-3">fallback base URL</a>, if <var>urlRecord</var> is failure or running <a data-link-type="dfn" href="https://w3c.github.io/webappsec-csp/#allow-base-for-document">Is base allowed for Document?</a> on the <a data-link-type="dfn" href="infrastructure.html#resulting-url-record" id="ref-for-resulting-url-record-4">resulting URL record</a> and <var>document</var> returns "<code>Blocked</code>", and to <var>urlRecord</var> otherwise.</p>
      </li></ol>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLBaseElement" data-dfn-type="attribute" data-export="" id="dom-htmlbaseelement-href"><code>href</code></dfn> IDL attribute, on getting, must
    return the result of running the following algorithm:</p>
      <ol>
       <li data-md="">
        <p>Let <var>document</var> be <var>element</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>.</p>
       </li><li data-md="">
        <p>Let <var>url</var> be the value of the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-base-href" id="ref-for-element-attrdef-base-href-11">href</a></code> attribute of the <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-22">base</a></code> element, if it
has one, and the empty string otherwise.</p>
       </li><li data-md="">
        <p>Let <var>urlRecord</var> be the result of <a data-link-type="dfn" href="infrastructure.html#reparsed" id="ref-for-reparsed-9">parsing</a> <var>url</var> with <var>document</var>’s <a data-link-type="dfn" href="infrastructure.html#fallback-base-url" id="ref-for-fallback-base-url-4">fallback base url</a>, and <var>document</var>’s <a data-link-type="dfn" href="infrastructure.html#character-encoding" id="ref-for-character-encoding-5">character encoding</a>. (Thus, the <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-23">base</a></code> element isn’t affected by other <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-24">base</a></code> elements or itself).</p>
       </li><li data-md="">
        <p>If <var>urlRecord</var> is failure, return <var>url</var>.</p>
       </li><li data-md="">
        <p>Return the <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-serializer">serialization</a> of <var>urlRecord</var>.</p>
      </li></ol>
      <p>The <code class="idl"><a data-link-type="idl" href="document-metadata.html#dom-htmlbaseelement-href" id="ref-for-dom-htmlbaseelement-href-2">href</a></code> IDL attribute, on setting, must set the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-base-href" id="ref-for-element-attrdef-base-href-12">href</a></code> content
    attribute to the given new value.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLBaseElement" data-dfn-type="attribute" data-export="" id="dom-htmlbaseelement-target"><code>target</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-8">reflect</a> the content attribute of the same name.</p>
     </div>
     <div class="example" id="example-2ced58ee">
      <a class="self-link" href="document-metadata.html#example-2ced58ee"></a> In this example, a <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-25">base</a></code> element is used to set the <a data-link-type="dfn" href="infrastructure.html#document-base-url" id="ref-for-document-base-url-8">document base URL</a>: 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>This is an example for the <span class="ni">&amp;lt;</span>base<span class="ni">&amp;gt;</span> element<span class="nt">&lt;/title&gt;</span>
    <span class="nt">&lt;base</span> <span class="na">href=</span><span class="s">"https://www.example.com/news/index.html"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;p&gt;</span>Visit the <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"archives.html"</span><span class="nt">&gt;</span>archives<span class="nt">&lt;/a&gt;</span>.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
      <p>The link in the above example would be a link to
    "<code>https://www.example.com/news/archives.html</code>".</p>
     </div>
     <h4 class="heading settled" data-level="4.2.4" id="the-link-element"><span class="secno">4.2.4. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-link"><code>link</code></dfn> element</span><a class="self-link" href="document-metadata.html#the-link-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-6">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-6">Metadata content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-5">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-7">metadata content</a> is expected.
      </dd><dd>In a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-5">noscript</a></code> element that is a child of a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-23">head</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-8">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#nothing" id="ref-for-nothing-2">Nothing</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-5">Tag omission in text/html</a>:
      </dt><dd>No <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-6">end tag</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-6">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-5">Global attributes</a>
      </dd><dd><code>href</code> — Address of the <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-6">hyperlink</a>
      </dd><dd><code>crossorigin</code> — How the element handles crossorigin requests
      </dd><dd><code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-2">rel</a></code> — Relationship of this document (or subsection/topic) to the destination resource
      </dd><dd><code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-a-rev" id="ref-for-element-attrdef-a-rev-1">rev</a></code> — <a data-link-type="dfn" href="document-metadata.html#reverse-link" id="ref-for-reverse-link-1">Reverse link</a> relationship of the destination resource to this document (or subsection/topic)
      </dd><dd><code>media</code> — Applicable media
      </dd><dd><code>hreflang</code> — Language of the linked resource
      </dd><dd><code>type</code> — Hint for the type of the referenced resource
      </dd><dd><code>sizes</code> — Sizes of the icons (for <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-3">rel</a></code>="<code>icon</code>")
      </dd><dd> Also, the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-title" id="ref-for-element-attrdef-link-title-1">title</a></code> attribute has special semantics on this element:  Title of the
      link; alternative style sheet set name. 
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a data-link-type="dfn" href="editing.html#link" id="ref-for-link-1"><code>link</code></a> (default - <a data-link-type="dfn" href="dom.html#do-not-set" id="ref-for-do-not-set-1"><em>do not set</em></a>).
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-7">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dd>For <code>role</code> value 
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-5">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLLinkElement" data-dfn-type="interface" data-export="" id="htmllinkelement-htmllinkelement">HTMLLinkElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-15">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmllinkelement-href" id="ref-for-dom-htmllinkelement-href-1">href</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span>? <a class="nv idl-code" data-link-type="attribute" data-type="DOMString?" href="document-metadata.html#dom-htmllinkelement-crossorigin" id="ref-for-dom-htmllinkelement-crossorigin-1">crossOrigin</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmllinkelement-rel" id="ref-for-dom-htmllinkelement-rel-1">rel</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmllinkelement-rev" id="ref-for-dom-htmllinkelement-rev-1">rev</a>;
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>, <a class="nv idl-code" data-link-type="extended-attribute">PutForwards</a>=<a class="n idl-code" data-link-type="attribute" href="https://dom.spec.whatwg.org/#dom-domtokenlist-value">value</a>]<span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#domtokenlist">DOMTokenList</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="DOMTokenList" href="document-metadata.html#dom-htmllinkelement-rellist" id="ref-for-dom-htmllinkelement-rellist-1">relList</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmllinkelement-media" id="ref-for-dom-htmllinkelement-media-1">media</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmllinkelement-hreflang" id="ref-for-dom-htmllinkelement-hreflang-1">hreflang</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmllinkelement-type" id="ref-for-dom-htmllinkelement-type-1">type</a>;
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>, <a class="nv idl-code" data-link-type="extended-attribute">PutForwards</a>=<a class="n idl-code" data-link-type="attribute" href="https://dom.spec.whatwg.org/#dom-domtokenlist-value">value</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#domtokenlist">DOMTokenList</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="DOMTokenList" href="document-metadata.html#dom-htmllinkelement-sizes" id="ref-for-dom-htmllinkelement-sizes-1">sizes</a>;
};
<a class="n" data-link-type="idl-name" href="document-metadata.html#htmllinkelement-htmllinkelement" id="ref-for-htmllinkelement-htmllinkelement-1">HTMLLinkElement</a> <span class="kt">implements</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/cssom-1/#linkstyle">LinkStyle</a>;
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-4">link</a></code> element allows authors to link their document to other resources.</p>
     <p>The destination of the link(s) is given by the <dfn class="dfn-paneled" data-dfn-for="link" data-dfn-type="element-attr" data-export="" id="element-attrdef-link-href"><code>href</code></dfn> attribute, which must
  be present and must contain a <a data-link-type="dfn" href="infrastructure.html#valid-non-empty-url-potentially-surrounded-by-spaces" id="ref-for-valid-non-empty-url-potentially-surrounded-by-spaces-1">valid non-empty URL potentially surrounded by spaces</a>. <span class="impl">If the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-href" id="ref-for-element-attrdef-link-href-1">href</a></code> attribute is absent, then the element does not define
  a link.</span></p>
     <p>A <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-5">link</a></code> element must have a <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-4">rel</a></code> attribute.</p>
     <p class="note" role="note"> If the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-5">rel</a></code> attribute is used, the element is restricted to the <code>head</code> element. </p>
     <p>The types of link indicated (the relationships) are given by the value of the <dfn class="dfn-paneled" data-dfn-for="link" data-dfn-type="element-attr" data-export="" id="element-attrdef-link-rel"><code>rel</code></dfn> attribute, which, if present, must have a
  value that is a <a data-link-type="dfn" href="infrastructure.html#set-of-space-separated-tokens" id="ref-for-set-of-space-separated-tokens-7">set of space-separated tokens</a>. The <a data-link-type="dfn" href="links.html#allowed-keywords-and-their-meanings" id="ref-for-allowed-keywords-and-their-meanings-1">allowed keywords and their
  meanings</a> are defined in a later section. If the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-6">rel</a></code> attribute is absent, has no
  keywords, or if none of the keywords used are allowed according to the definitions in this
  specification, then the element does not create any links.</p>
     <p>Two categories of links can be created using the <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-6">link</a></code> element: <a data-link-type="dfn" href="links.html#external-resource-link" id="ref-for-external-resource-link-1">Links to external resources</a> and <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-7">hyperlinks</a>. The <a href="links.html#sec-link-types">§4.8.6 Link types</a> section defines
  whether a particular link type is an external resource or a hyperlink. One <code>link</code> element can create multiple links (of which some might be external resource links and some might
  be hyperlinks); exactly which and how many links are created depends on the keywords given in the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-7">rel</a></code> attribute. User agents must process the links on a per-link
  basis, not a per-element basis.</p>
     <p class="note" role="note"> Each link created for a <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-7">link</a></code> element is handled separately. For instance, if there
    are two <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-8">link</a></code> elements with <code>rel="stylesheet"</code>, they each count as a
    separate external resource, and each is affected by its own attributes independently. Similarly,
    if a single <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-9">link</a></code> element has a <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-8">rel</a></code> attribute with the value <code>next stylesheet</code>, it creates both a <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-8">hyperlink</a> (for the <code>next</code> keyword) and an <a data-link-type="dfn" href="links.html#external-resource-link" id="ref-for-external-resource-link-2">external resource link</a> (for the <code>stylesheet</code> keyword), and
    they are affected by other attributes (such as <code>media</code> or <code>title</code>)
    differently. </p>
     <div class="example" id="example-14dde86b">
      <a class="self-link" href="document-metadata.html#example-14dde86b"></a> For example, the following <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-10">link</a></code> element creates two hyperlinks (to the same page): 
<pre class="highlight"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"author license"</span> <span class="na">href=</span><span class="s">"/about"</span><span class="nt">&gt;</span>
</pre>
      <p>The two links created by this element are one whose semantic is that the target page has
    information about the current page’s author, and one whose semantic is that the target page has
    information regarding the license under which the current page is provided.</p>
     </div>
     <p><code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-11">link</a></code> and <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-17">a</a></code> elements may also have a <dfn class="dfn-paneled" data-dfn-for="a,link,links" data-dfn-type="element-attr" data-export="" id="element-attrdef-a-rev"><code>rev</code></dfn> attribute, which is used to describe
  a <a data-link-type="dfn" href="document-metadata.html#reverse-link" id="ref-for-reverse-link-2">reverse link</a> relationship from the resource specified by the <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-9">href</a></code> to the
  current document. If present, the value of this attribute must be a <a data-link-type="dfn" href="infrastructure.html#set-of-space-separated-tokens" id="ref-for-set-of-space-separated-tokens-8">set of space-separated
  tokens</a>. Like the <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-rel" id="ref-for-element-attrdef-a-rel-1">rel</a></code> attribute, <a href="links.html#sec-link-types">§4.8.6 Link types</a> describes the <a data-link-type="dfn" href="links.html#allowed-keywords-and-their-meanings" id="ref-for-allowed-keywords-and-their-meanings-2">allowed
  keywords and their meanings</a> for the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-a-rev" id="ref-for-element-attrdef-a-rev-2">rev</a></code> attribute. Both the <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-rel" id="ref-for-element-attrdef-a-rel-2">rel</a></code> and <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-a-rev" id="ref-for-element-attrdef-a-rev-3">rev</a></code> attributes may be present on the same element.</p>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="reverse link|Reverse links" data-noexport="" id="reverse-link">Reverse links</dfn> are a way to express the reverse
  directional relationship of a link. In contrast to the <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-rel" id="ref-for-element-attrdef-a-rel-3">rel</a></code> attribute, whose value
  conveys a forward directional relationship ("how is the link related to me"), the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-a-rev" id="ref-for-element-attrdef-a-rev-4">rev</a></code> attribute allows for similiar relationships to be expressed in the reverse direction ("how am I
  related to this link"). These values can enable user agents to build a more comprehensive map of
  linked documents.</p>
     <div class="example" id="example-c7aadf81">
      <a class="self-link" href="document-metadata.html#example-c7aadf81"></a>Given two documents, each containing a chapter of a book, the links between
  them could be described with the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-9">rel</a></code> and <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-a-rev" id="ref-for-element-attrdef-a-rev-5">rev</a></code> attributes as follows: 
      <p>Document with URL "chapter1.html"</p>
<pre class="highlight"><span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"chapter2.html"</span> <span class="na">rel=</span><span class="s">"next"</span> <span class="na">rev=</span><span class="s">"prev"</span><span class="nt">&gt;</span>
</pre>
      <p>Document with URL "chapter2.html"</p>
<pre class="highlight"><span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"chapter1.html"</span> <span class="na">rel=</span><span class="s">"prev"</span> <span class="na">rev=</span><span class="s">"next"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"chapter3.html"</span> <span class="na">rel=</span><span class="s">"next"</span> <span class="na">rev=</span><span class="s">"prev"</span><span class="nt">&gt;</span>
</pre>
      <p>From chapter1.html, the link to chapter2.html is the "<code>next</code>" chapter in the series in the
  forward direction, and the "<code>previous</code>" chapter in the reverse diretion (from
  chapter2.html to chapter1.html).</p>
     </div>
     <div class="example" id="example-c770082c">
      <a class="self-link" href="document-metadata.html#example-c770082c"></a>The links in a table of contents document might be described using <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-rel" id="ref-for-element-attrdef-a-rel-4">rel</a></code> and <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-a-rev" id="ref-for-element-attrdef-a-rev-6">rev</a></code> as follows: 
<pre class="highlight"><span class="nt">&lt;ol&gt;</span>
  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"chapter1.html"</span> <span class="na">rev=</span><span class="s">"toc"</span> <span class="na">rel=</span><span class="s">"next"</span><span class="nt">&gt;</span>chapter 1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"chapter2.html"</span> <span class="na">rev=</span><span class="s">"toc"</span><span class="nt">&gt;&lt;/a&gt;</span>chapter 2<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"chapter3.html"</span> <span class="na">rev=</span><span class="s">"toc"</span><span class="nt">&gt;&lt;/a&gt;</span>chapter 3<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>
</pre>
      <p>From the table of contents, the "<code>next</code>" logical path is to the first chapter,
  expressed using <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-rel" id="ref-for-element-attrdef-a-rel-5">rel</a></code>. Each chapter link has a "<code>toc</code>" <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-a-rev" id="ref-for-element-attrdef-a-rev-7">rev</a></code> value
  which indicates that the current document is the table of contents document for every chapter.</p>
     </div>
     <p>The <dfn class="dfn-paneled" data-dfn-for="link" data-dfn-type="element-attr" data-export="" id="element-attrdef-link-crossorigin"><code>crossorigin</code></dfn> attribute is a <a data-link-type="dfn" href="infrastructure.html#cors-settings-attribute" id="ref-for-cors-settings-attribute-1">CORS settings attribute</a>. It is
  intended for use with external resource links.</p>
     <p>The exact behavior for links to external resources depends on the exact relationship, as defined
  for the relevant link type. Some of the attributes control whether or not the external resource is
  to be applied (as defined below).</p>
     <p>For external resources that are represented in the DOM (for example, style sheets), the DOM
  representation must be made available (modulo cross-origin restrictions) even if the resource is
  not applied. To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="obtain|obtain the resource" data-noexport="" id="obtain">obtain the resource</dfn>, the user agent must
  run the following steps:</p>
     <ol>
      <li data-md="">
       <p>If the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-href" id="ref-for-element-attrdef-link-href-2">href</a></code> attribute’s value is the empty string, then abort these steps.</p>
      </li><li data-md="">
       <p><a data-link-type="dfn" href="infrastructure.html#reparsed" id="ref-for-reparsed-10">Parse</a> the <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-url">URL</a> given by the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-href" id="ref-for-element-attrdef-link-href-3">href</a></code> attribute, relative to the
  element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>. If that fails, then abort these steps. Otherwise, let <var>url</var> be the <a data-link-type="dfn" href="infrastructure.html#resulting-url-record" id="ref-for-resulting-url-record-5">resulting URL record</a>.</p>
      </li><li data-md="">
       <p>Let <var>corsAttributeState</var> be the current state of the element’s <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-crossorigin" id="ref-for-element-attrdef-link-crossorigin-1">crossorigin</a></code> content attribute.</p>
      </li><li data-md="">
       <p>Let <var>request</var> be the result of <a data-link-type="dfn" href="infrastructure.html#creating-a-potential-cors-request" id="ref-for-creating-a-potential-cors-request-1">creating a potential-CORS request</a> given <var>url</var> and <var>corsAttributeState</var>.</p>
      </li><li data-md="">
       <p>Set <var>request</var>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-client">client</a> to the <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-12">link</a></code> element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>’s <code class="idl"><a data-link-type="idl" href="browsers.html#window-window" id="ref-for-window-window-5">Window</a></code> object’s <a data-link-type="dfn" href="webappapis.html#environment-settings-object" id="ref-for-environment-settings-object-1">environment settings object</a>.</p>
      </li><li data-md="">
       <p><a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch">Fetch</a> <var>request</var>.</p>
     </li></ol>
     <p>User agents may opt to only try to obtain such resources when they are needed, instead of
  pro-actively fetching all the external resources that are not applied.</p>
     <p>The semantics of the protocol used (e.g., HTTP) must be followed when fetching external
  resources. (For example, redirects will be followed and 404 responses will cause the external
  resource to not be applied.)</p>
     <p>Once the attempts to obtain the resource and its <a data-link-type="dfn" href="infrastructure.html#critical-subresource" id="ref-for-critical-subresource-1">critical subresources</a> are complete, the
  user agent must, if the loads were successful, <a data-link-type="dfn" href="webappapis.html#queuing" id="ref-for-queuing-2">queue a task</a> to <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-3">fire a simple event</a> named <code>load</code> at the <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-13">link</a></code> element, or, if the resource or one of its <a data-link-type="dfn" href="infrastructure.html#critical-subresource" id="ref-for-critical-subresource-2">critical subresources</a> failed to completely load for any reason (e.g., DNS error, HTTP 404
  response, a connection being prematurely closed, unsupported Content-Type), <a data-link-type="dfn" href="webappapis.html#queuing" id="ref-for-queuing-3">queue a task</a> to <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-4">fire a simple event</a> named <code>error</code> at the <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-14">link</a></code> element.
  Non-network errors in processing the resource or its subresources (e.g., CSS parse errors, PNG
  decoding errors) are not failures for the purposes of this paragraph.</p>
     <p>The <a data-link-type="dfn" href="webappapis.html#task-source" id="ref-for-task-source-2">task source</a> for these <a data-link-type="dfn" href="webappapis.html#tasks" id="ref-for-tasks-3">tasks</a> is the <a data-link-type="dfn" href="webappapis.html#dom-manipulation-task-source" id="ref-for-dom-manipulation-task-source-1">DOM manipulation task source</a>.</p>
     <p>The element must <a data-link-type="dfn" href="syntax.html#delay-the-load-event" id="ref-for-delay-the-load-event-1">delay the load event</a> of the element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> until all the
  attempts to obtain the resource and its <a data-link-type="dfn" href="infrastructure.html#critical-subresource" id="ref-for-critical-subresource-3">critical subresources</a> are complete. (Resources
  that the user agent has not yet attempted to obtain, e.g., because it is waiting for the resource
  to be needed, do not <a data-link-type="dfn" href="syntax.html#delay-the-load-event" id="ref-for-delay-the-load-event-2">delay the load event</a>.)</p>
     <hr>
     <p>Interactive user agents may provide users with a means to <a data-link-type="dfn" href="links.html#follow-hyperlinks" id="ref-for-follow-hyperlinks-2">follow the hyperlinks</a> created
  using the <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-15">link</a></code> element, somewhere within their user interface. The exact interface
  is not defined by this specification, but it could include the following information (obtained
  from the element’s attributes, again as defined below), in some form or another (possibly
  simplified), for each hyperlink created with each <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-16">link</a></code> element in the document:</p>
     <ul>
      <li data-md="">
       <p>The relationship between this document and the resource (given by the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-10">rel</a></code> attribute)</p>
      </li><li data-md="">
       <p>The title of the resource (given by the <code>title</code> attribute).</p>
      </li><li data-md="">
       <p>The address of the resource (given by the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-href" id="ref-for-element-attrdef-link-href-4">href</a></code> attribute).</p>
      </li><li data-md="">
       <p>The language of the resource (given by the <code>hreflang</code> attribute).</p>
      </li><li data-md="">
       <p>The optimum media for the resource (given by the <code>media</code> attribute).</p>
     </li></ul>
     <p>User agents could also include other information, such as the type of the resource (as given by
  the <code>type</code> attribute).</p>
     <p class="note" role="note"> Hyperlinks created with the <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-17">link</a></code> element and its <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-11">rel</a></code> attribute apply
    to the whole page. This contrasts with the <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-rel" id="ref-for-element-attrdef-a-rel-6">rel</a></code> attribute of <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-18">a</a></code> and <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-area" id="ref-for-elementdef-area-9">area</a></code> elements, which indicates the type of a link whose context is given by the
    link’s location within the document. </p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="link" data-dfn-type="element-attr" data-export="" id="element-attrdef-link-media"><code>media</code></dfn> attribute says which media the resource applies to. The value
  must be a <a data-link-type="dfn" href="infrastructure.html#valid-media-query-list" id="ref-for-valid-media-query-list-1">valid media query list</a>.</p>
     <div class="impl">
       If the link is a <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-9">hyperlink</a> then the <code>media</code> attribute is purely advisory, and
    describes for which media the document in question was designed. 
      <p>However, if the link is an <a data-link-type="dfn" href="links.html#external-resource-link" id="ref-for-external-resource-link-3">external resource link</a>, then the <code>media</code> attribute
    is prescriptive. The user agent must apply the external resource when the <code>media</code> attribute’s value <a data-link-type="dfn" href="infrastructure.html#match-the-environment" id="ref-for-match-the-environment-1">matches the environment</a> and the other relevant conditions apply, and
    must not apply it otherwise.</p>
      <p class="note" role="note"> The external resource might have further restrictions defined within that limit its
      applicability. For example, a CSS style sheet might have some <code>@media</code> blocks. This
      specification does not override such further restrictions or requirements. </p>
     </div>
     <p>The default, if the <code>media</code> attribute is omitted, is "<code>all</code>", meaning that
  by default links apply to all media.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="link" data-dfn-type="element-attr" data-export="" id="element-attrdef-link-hreflang"><code>hreflang</code></dfn> attribute on the <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-18">link</a></code> element has the same
  semantics as the <code>hreflang</code> attribute on the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-19">a</a></code> element.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="link" data-dfn-type="element-attr" data-export="" id="element-attrdef-link-type"><code>type</code></dfn> attribute gives the <a data-link-type="dfn" href="infrastructure.html#mime-type" id="ref-for-mime-type-7">MIME type</a> of the linked resource. It
  is purely advisory. The value must be a <a data-link-type="dfn" href="infrastructure.html#valid-mime-type" id="ref-for-valid-mime-type-2">valid mime type</a>.</p>
     <p>For <a data-link-type="dfn" href="links.html#external-resource-link" id="ref-for-external-resource-link-4">external resource links</a>, the <code>type</code> attribute is used as a hint to user
  agents so that they can avoid fetching resources they do not support. <span class="impl">If the
  attribute is present, then the user agent must assume that the resource is of the given type (even
  if that is not a <a data-link-type="dfn" href="infrastructure.html#valid-mime-type" id="ref-for-valid-mime-type-3">valid mime type</a>, e.g., the empty string). If the attribute is omitted, but
  the external resource link type has a default type defined, then the user agent must assume that
  the resource is of that type. If the user agent does not support the given <a data-link-type="dfn" href="infrastructure.html#mime-type" id="ref-for-mime-type-8">MIME type</a> for the given
  link relationship, then the user agent should not <a data-link-type="dfn" href="document-metadata.html#obtain" id="ref-for-obtain-1">obtain</a> the resource; if the user agent does support the
  given <a data-link-type="dfn" href="infrastructure.html#mime-type" id="ref-for-mime-type-9">MIME type</a> for the given link relationship, then the user agent should <a data-link-type="dfn" href="document-metadata.html#obtain" id="ref-for-obtain-2">obtain</a> the
  resource at the appropriate time as specified for the <a data-link-type="dfn" href="links.html#external-resource-link" id="ref-for-external-resource-link-5">external resource link</a>’s particular
  type. If the attribute is omitted, and the external resource link type does not have a default
  type defined, but the user agent would <a data-link-type="dfn" href="document-metadata.html#obtain" id="ref-for-obtain-3">obtain</a> the resource if the type was known and
  supported, then the user agent should <a data-link-type="dfn" href="document-metadata.html#obtain" id="ref-for-obtain-4">obtain</a> the resource under the assumption that it will
  be supported.</span></p>
     <div class="impl">
       User agents must not consider the <code>type</code> attribute authoritative — upon
    fetching the resource, user agents must not use the <code>type</code> attribute to determine its
    actual type. Only the actual type (as defined in the next paragraph) is used to determine
    whether to <em>apply</em> the resource, not the aforementioned assumed type. 
      <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="determining the type of the resource" data-noexport="" id="determining-the-type-of-the-resource"></dfn>If the external resource link type defines rules for processing the resource’s <a data-link-type="dfn" href="infrastructure.html#content-type-metadata" id="ref-for-content-type-metadata-2">Content-Type metadata</a>, then those rules apply. Otherwise, if the resource is expected to
    be an image, user agents may apply the <a data-link-type="dfn" href="infrastructure.html#image-sniffing-rules" id="ref-for-image-sniffing-rules-1">image sniffing rules</a>, with the <var>official type</var> being the type determined from the resource’s <a data-link-type="dfn" href="infrastructure.html#content-type-metadata" id="ref-for-content-type-metadata-3">Content-Type metadata</a>, and use the resulting <a data-link-type="dfn" href="infrastructure.html#computed-type-of-the-resource" id="ref-for-computed-type-of-the-resource-1">computed type of the resource</a> as if it was
    the actual type. Otherwise, if neither of these conditions apply or if the user agent opts not
    to apply the image sniffing rules, then the user agent must use the resource’s <a data-link-type="dfn" href="infrastructure.html#content-type-metadata" id="ref-for-content-type-metadata-4">Content-Type metadata</a> to determine the type of the resource. If there is no type
    metadata, but the external resource link type has a default type defined, then the user agent
    must assume that the resource is of that type.</p>
      <p class="note" role="note"> The <code>stylesheet</code> link type defines rules for processing the resource’s <a data-link-type="dfn" href="infrastructure.html#content-type-metadata" id="ref-for-content-type-metadata-5">Content-Type metadata</a>. </p>
      <p>Once the user agent has established the type of the resource, the user agent must apply the
    resource if it is of a supported type and the other relevant conditions apply, and must ignore
    the resource otherwise.</p>
      <div class="example" id="example-6e437b6d">
       <a class="self-link" href="document-metadata.html#example-6e437b6d"></a> If a document contains style sheet links labeled as follows: 
<pre class="highlight"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"A"</span> <span class="na">type=</span><span class="s">"text/plain"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"B"</span> <span class="na">type=</span><span class="s">"text/css"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"C"</span><span class="nt">&gt;</span>
</pre>
       <p>...then a compliant user agent that supported only CSS style sheets would fetch the B and C files, and
     skip the A file (since <code>text/plain</code> is not the <a data-link-type="dfn" href="infrastructure.html#mime-type" id="ref-for-mime-type-10">MIME type</a> for CSS style
     sheets).</p>
       <p>For files B and C, it would then check the actual types returned by the server. For those that
     are sent as <code>text/css</code>, it would apply the styles, but for those labeled as <code>text/plain</code>, or any other type, it would not.</p>
       <p>If one of the two files was returned without a <a data-link-type="dfn" href="infrastructure.html#content-type-metadata" id="ref-for-content-type-metadata-6">Content-Type</a> metadata, or with a
     syntactically incorrect type like <code>Content-Type:&nbsp;"null"</code>, then the default type
     for <code>stylesheet</code> links would kick in. Since that default type is <code>text/css</code>, the style sheet <em>would</em> nonetheless be applied.</p>
      </div>
     </div>
     <p>The <dfn class="dfn-paneled" data-dfn-for="link" data-dfn-type="element-attr" data-export="" id="element-attrdef-link-title"><code>title</code></dfn> attribute gives the title of the link. With one exception, it is
  purely advisory. The value is text. The exception is for style sheet links, where the <code>title</code> attribute defines <a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#enabled-css-style-sheet-set">alternative style sheet sets</a>.</p>
     <p class="note" role="note"> The <code>title</code> attribute on <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-19">link</a></code> elements differs from the global <code>title</code> attribute of most other elements in that a link without a title does not
    inherit the title of the parent element: it merely has no title. </p>
     <p>The <code>sizes</code> attribute is used with the <code>icon</code> link type. The attribute must
  not be specified on <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-20">link</a></code> elements that do not have a <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-12">rel</a></code> attribute that
  specifies the <code>icon</code> keyword.</p>
     <div class="impl">
       The <a data-link-type="dfn" href="editing.html#activation-behavior" id="ref-for-activation-behavior-1">activation behavior</a> of <code>link</code> elements that create <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-10">hyperlinks</a> is to
    run the following steps: 
      <ol>
       <li data-md="">
        <p>If the <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-21">link</a></code> element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> is not <a data-link-type="dfn" href="browsers.html#fully-active" id="ref-for-fully-active-1">fully active</a>, then
abort these steps.</p>
       </li><li data-md="">
        <p><a data-link-type="dfn" href="links.html#follow-hyperlinks" id="ref-for-follow-hyperlinks-3">Follow the hyperlink</a> created by the<code>link</code> element.</p>
      </li></ol>
      <p>HTTP <code>Link:</code> headers, if supported, must be assumed to come before any links in the
    document, in the order that they were given in the HTTP message. These headers are to be
    processed according to the rules given in the relevant specifications. <a data-link-type="biblio" href="references.html#biblio-http">[HTTP]</a> <a data-link-type="biblio" href="references.html#biblio-rfc5988">[RFC5988]</a></p>
      <p class="note" role="note"> Registration of relation types in HTTP Link: headers is distinct from <a data-link-type="dfn" href="links.html#allowed-keywords-and-their-meanings" id="ref-for-allowed-keywords-and-their-meanings-3">HTML link types</a>,
      and thus their semantics can be different from same-named HTML types. </p>
      <p>The IDL attributes <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLLinkElement" data-dfn-type="attribute" data-export="" id="dom-htmllinkelement-href"><code>href</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLLinkElement" data-dfn-type="attribute" data-export="" id="dom-htmllinkelement-rel"><code>rel</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLLinkElement" data-dfn-type="attribute" data-export="" id="dom-htmllinkelement-rev"><code>rev</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLLinkElement" data-dfn-type="attribute" data-export="" id="dom-htmllinkelement-media"><code>media</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLLinkElement" data-dfn-type="attribute" data-export="" id="dom-htmllinkelement-hreflang"><code>hreflang</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLLinkElement" data-dfn-type="attribute" data-export="" id="dom-htmllinkelement-type"><code>type</code></dfn>, and <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLLinkElement" data-dfn-type="attribute" data-export="" id="dom-htmllinkelement-sizes"><code>sizes</code></dfn> each must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-9">reflect</a> the
    respective content attributes of the same name.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLLinkElement" data-dfn-type="attribute" data-export="" id="dom-htmllinkelement-crossorigin"><code>crossOrigin</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-10">reflect</a> the <code>crossorigin</code> content attribute.</p>
      <p>The IDL attribute <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLLinkElement" data-dfn-type="attribute" data-export="" id="dom-htmllinkelement-rellist"><code>relList</code></dfn> <span class="impl">must</span> <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-11">reflect</a> the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-13">rel</a></code> content attribute.</p>
      <p><code>relList</code>’s <code>DOMTokenList</code>’s <a data-link-type="dfn" href="infrastructure.html#supported-tokens" id="ref-for-supported-tokens-1">supported tokens</a> are the keywords
    defined in <a data-link-type="dfn" href="links.html#allowed-keywords-and-their-meanings" id="ref-for-allowed-keywords-and-their-meanings-4">HTML link types</a> which are allowed on <code>link</code> elements and supported
    by the user agent.</p>
      <p><code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-14">rel</a></code>'s <a data-link-type="dfn" href="infrastructure.html#supported-tokens" id="ref-for-supported-tokens-2">supported tokens</a> are the keywords defined in <a data-link-type="dfn" href="links.html#allowed-keywords-and-their-meanings" id="ref-for-allowed-keywords-and-their-meanings-5">HTML link types</a> which are allowed on <code>link</code> elements, impact
    the processing model, and are supported by the user agent. The possible supported tokens are <code>alternate</code>, <a data-link-type="dfn" href="https://www.w3.org/TR/resource-hints/#dns-prefetch">dns-prefetch</a>, <code>icon</code>, <a data-link-type="dfn" href="https://www.w3.org/TR/resource-hints/#preconnect">preconnect</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/resource-hints/#prefetch">prefetch</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/resource-hints/#prerender">prerender</a>, and <code>stylesheet</code>. <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-15">rel</a></code>'s <a data-link-type="dfn" href="infrastructure.html#supported-tokens" id="ref-for-supported-tokens-3">supported tokens</a> must only include the tokens from
    this list that the user agent implements the processing model for.</p>
      <p>Other specifications may add <a data-link-type="dfn" href="links.html#allowed-keywords-and-their-meanings" id="ref-for-allowed-keywords-and-their-meanings-6">HTML link types</a> as
    defined in <a data-link-type="dfn" href="links.html#other-link-types" id="ref-for-other-link-types-1">Other link types</a>, such as <a data-link-type="biblio" href="references.html#biblio-resource-hints">[RESOURCE-HINTS]</a>. These specifications may require
    that their link types be included in <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-link-rel" id="ref-for-element-attrdef-link-rel-16">rel</a></code>'s supported
    tokens.</p>
     </div>
     <p>The <code>LinkStyle</code> interface is also implemented by this element. <a data-link-type="biblio" href="references.html#biblio-cssom">[CSSOM]</a></p>
     <div class="example" id="example-86d1e683">
      <a class="self-link" href="document-metadata.html#example-86d1e683"></a> Here, a set of <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-22">link</a></code> elements provide some style sheets: 
<pre class="highlight"><span class="c">&lt;!-- a persistent style sheet --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"default.css"</span><span class="nt">&gt;</span>

<span class="c">&lt;!-- the preferred alternate style sheet --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"green.css"</span> <span class="na">title=</span><span class="s">"Green styles"</span><span class="nt">&gt;</span>

<span class="c">&lt;!-- some alternate style sheets --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"alternate stylesheet"</span> <span class="na">href=</span><span class="s">"contrast.css"</span> <span class="na">title=</span><span class="s">"High contrast"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"alternate stylesheet"</span> <span class="na">href=</span><span class="s">"big.css"</span> <span class="na">title=</span><span class="s">"Big fonts"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"alternate stylesheet"</span> <span class="na">href=</span><span class="s">"wide.css"</span> <span class="na">title=</span><span class="s">"Wide screen"</span><span class="nt">&gt;</span>
</pre>
     </div>
     <div class="example" id="example-c6e8a7b3">
      <a class="self-link" href="document-metadata.html#example-c6e8a7b3"></a> The following example shows how you can specify versions of the page that use alternative
    formats, are aimed at other languages, and that are intended for other media: 
<pre class="highlight"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">alternate</span> <span class="na">href=</span><span class="s">"/en/html"</span> <span class="na">hreflang=</span><span class="s">en</span> <span class="na">type=</span><span class="s">text/html</span> <span class="na">title=</span><span class="s">"English HTML"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">alternate</span> <span class="na">href=</span><span class="s">"/fr/html"</span> <span class="na">hreflang=</span><span class="s">fr</span> <span class="na">type=</span><span class="s">text/html</span> <span class="na">title=</span><span class="s">"French HTML"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">alternate</span> <span class="na">href=</span><span class="s">"/en/html/print"</span> <span class="na">hreflang=</span><span class="s">en</span> <span class="na">type=</span><span class="s">text/html</span> <span class="na">media=</span><span class="s">print</span> <span class="na">title=</span><span class="s">"English HTML (for printing)"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">alternate</span> <span class="na">href=</span><span class="s">"/fr/html/print"</span> <span class="na">hreflang=</span><span class="s">fr</span> <span class="na">type=</span><span class="s">text/html</span> <span class="na">media=</span><span class="s">print</span> <span class="na">title=</span><span class="s">"French HTML (for printing)"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">alternate</span> <span class="na">href=</span><span class="s">"/en/pdf"</span> <span class="na">hreflang=</span><span class="s">en</span> <span class="na">type=</span><span class="s">application/pdf</span> <span class="na">title=</span><span class="s">"English PDF"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">alternate</span> <span class="na">href=</span><span class="s">"/fr/pdf"</span> <span class="na">hreflang=</span><span class="s">fr</span> <span class="na">type=</span><span class="s">application/pdf</span> <span class="na">title=</span><span class="s">"French PDF"</span><span class="nt">&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.2.5" id="the-meta-element"><span class="secno">4.2.5. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-meta"><code>meta</code></dfn> element</span><a class="self-link" href="document-metadata.html#the-meta-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-7">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-8">Metadata content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-6">Contexts in which this element can be used</a>:
      </dt><dd> If the <code>charset</code> attribute is present, or if the element’s <code>http-equiv</code> attribute is in the <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-type" id="ref-for-statedef-http-equiv-content-type-1">encoding declaration state</a>: in a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-24">head</a></code> element. 
      </dd><dd> If the <code>http-equiv</code> attribute is present but not in the <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-type" id="ref-for-statedef-http-equiv-content-type-2">encoding declaration state</a>: in a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-25">head</a></code> element. 
      </dd><dd> If the <code>http-equiv</code> attribute is present but not in the <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-type" id="ref-for-statedef-http-equiv-content-type-3">encoding declaration state</a>: in a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-6">noscript</a></code> element that is a child of a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-26">head</a></code> element. 
      </dd><dd> If the <code>name</code> attribute is present: where <a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-9">metadata content</a> is expected. 
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-9">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#nothing" id="ref-for-nothing-3">Nothing</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-6">Tag omission in text/html</a>:
      </dt><dd>No <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-7">end tag</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-7">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-6">Global attributes</a>
      </dd><dd><code>name</code> — Metadata name
      </dd><dd><code>http-equiv</code> — Pragma directive
      </dd><dd><code>content</code> — Value of the element
      </dd><dd><code>charset</code> — <a data-link-type="dfn" href="document-metadata.html#character-encoding-declaration" id="ref-for-character-encoding-declaration-3">Character encoding declaration</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd>None
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-8">Global aria-* attributes</a>
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-6">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLMetaElement" data-dfn-type="interface" data-export="" id="htmlmetaelement-htmlmetaelement">HTMLMetaElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-16">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmlmetaelement-name" id="ref-for-dom-htmlmetaelement-name-1">name</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmlmetaelement-httpequiv" id="ref-for-dom-htmlmetaelement-httpequiv-1">httpEquiv</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmlmetaelement-content" id="ref-for-dom-htmlmetaelement-content-1">content</a>;
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-10">meta</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-8">represents</a> various kinds of metadata that cannot be
  expressed using the <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-22"><code>title</code></a>, <code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-26">base</a></code>, <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-23">link</a></code>, <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-6">style</a></code>,
  and <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-17">script</a></code> elements.</p>
     <p>The <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-11">meta</a></code> element can represent document-level metadata with the <code>name</code> attribute, pragma directives with the <dfn class="dfn-paneled" data-dfn-for="meta" data-dfn-type="element-attr" data-export="" id="element-attrdef-meta-http-equiv"><code>http-equiv</code></dfn> attribute, and the file’s <a data-link-type="dfn" href="document-metadata.html#character-encoding-declaration" id="ref-for-character-encoding-declaration-4">character encoding declaration</a> when an HTML document is serialized to string form (e.g., for
  transmission over the network or for disk storage) with the <code>charset</code> attribute.</p>
     <p>Exactly one of the <code>name</code>, <code>http-equiv</code>, and <code>charset</code> attributes must be specified.</p>
     <p>If either <code>name</code> or <code>http-equiv</code> is
  specified, then the <code>content</code> attribute must also be
  specified. Otherwise, it must be omitted.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="meta" data-dfn-type="element-attr" data-export="" id="element-attrdef-meta-charset"><code>charset</code></dfn> attribute specifies the character
  encoding used by the document. This is a <a data-link-type="dfn" href="document-metadata.html#character-encoding-declaration" id="ref-for-character-encoding-declaration-5">character encoding declaration</a>. If the
  attribute is present in an <a data-link-type="dfn" href="infrastructure.html#xml-document" id="ref-for-xml-document-9">XML document</a>, its value must be an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-9">ASCII case-insensitive</a> match for the string "<code>utf-8</code>" (and the
  document is therefore forced to use <a data-link-type="dfn" href="syntax.html#utf-8" id="ref-for-utf-8-1">UTF-8</a> as its encoding).</p>
     <p class="note" role="note">The <code>charset</code> attribute on the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-12">meta</a></code> element has no effect in XML documents, and is only allowed in order to
  facilitate migration to and from XHTML.</p>
     <p>There must not be more than one <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-13">meta</a></code> element with a <code>charset</code> attribute
  per document.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="meta" data-dfn-type="element-attr" data-export="" id="element-attrdef-meta-content"><code>content</code></dfn> attribute gives the value of the
  document metadata or pragma directive when the element is used for those purposes. The allowed
  values depend on the exact context, as described in subsequent sections of this specification.</p>
     <p>If a <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-14">meta</a></code> element has a <dfn class="dfn-paneled" data-dfn-for="meta" data-dfn-type="element-attr" data-export="" id="element-attrdef-meta-name"><code>name</code></dfn> attribute, it sets document metadata. Document metadata is expressed in terms of name-value pairs,
  the <code>name</code> attribute on the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-15">meta</a></code> element giving the
  name, and the <code>content</code> attribute on the same element giving
  the value. The name specifies what aspect of metadata is being set; valid names and the meaning of
  their values are described in the following sections. If a <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-16">meta</a></code> element has no <code>content</code> attribute, then the value part of the metadata name-value pair is the empty
  string.</p>
     <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLMetaElement" data-dfn-type="attribute" data-export="" id="dom-htmlmetaelement-name"><code>name</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLMetaElement" data-dfn-type="attribute" data-export="" id="dom-htmlmetaelement-content"><code>content</code></dfn> IDL attributes must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-12">reflect</a> the respective content attributes of the same name. The IDL attribute <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLMetaElement" data-dfn-type="attribute" data-export="" id="dom-htmlmetaelement-httpequiv"><code>httpEquiv</code></dfn> must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-13">reflect</a> the content attribute <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-meta-http-equiv" id="ref-for-element-attrdef-meta-http-equiv-1">http-equiv</a></code>.</p>
     <h5 class="heading settled" data-level="4.2.5.1" id="standard-metadata-names"><span class="secno">4.2.5.1. </span><span class="content">Standard metadata names</span><a class="self-link" href="document-metadata.html#standard-metadata-names"></a></h5>
     <p>This specification defines a few names for the <code>name</code> attribute of the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-17">meta</a></code> element.</p>
     <p>Names are case-insensitive<span class="impl">, and must be compared in an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-10">ASCII case-insensitive</a> manner</span>.</p>
     <dl>
      <dt data-md="">
       <p><dfn data-dfn-type="dfn" data-noexport="" id="application-name"><code>application-name</code><a class="self-link" href="document-metadata.html#application-name"></a></dfn></p>
      </dt><dd data-md="">
       <p>The value must be a short free-form string giving the name of the Web application that the page
  represents. If the page is not a Web application, the <code>application-name</code> metadata
  name must not be used. Translations of the Web application’s name may be given, using the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-25">lang</a></code> attribute to specify the language of each name.</p>
       <p>There must not be more than one <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-18">meta</a></code> element with a given <a data-link-type="dfn" href="dom.html#language" id="ref-for-language-1">language</a> and
  with its <code>name</code> attribute set to the value <code>application-name</code> per
  document.</p>
       <div class="impl">
         User agents may use the application name in UI in preference to the page’s <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-23"><code>title</code></a>, since the title might include status messages and the like relevant to
    the status of the page at a particular moment in time instead of just being the name of the
    application. 
        <p>To find the application name to use given an ordered list of languages (e.g., British
    English, American English, and English), user agents must run the following steps:</p>
        <ol>
         <li data-md="">
          <p>Let <var>languages</var> be the list of languages.</p>
         </li><li data-md="">
          <p>Let <var>default language</var> be the <a data-link-type="dfn" href="dom.html#language" id="ref-for-language-2">language</a> of the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>'s <a data-link-type="dfn" href="infrastructure.html#root-element" id="ref-for-root-element-20">root element</a>, if any, and if that language is not unknown.</p>
         </li><li data-md="">
          <p>If there is a <var>default language</var>, and if it is not the same language as any of
the languages in <var>languages</var>, append it to <var>languages</var>.</p>
         </li><li data-md="">
          <p>Let <var>winning language</var> be the first language in <var>languages</var> for which
there is a <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-19">meta</a></code> element in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> that has its <code>name</code> attribute set to the value <code>application-name</code> and whose <a data-link-type="dfn" href="dom.html#language" id="ref-for-language-3">language</a> is the language in question.</p>
          <p>If none of the languages have such a <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-20">meta</a></code> element, then abort these steps;
there’s no given application name.</p>
         </li><li data-md="">
          <p>Return the value of the <code>content</code> attribute of the first <code>meta</code> element in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-22">tree order</a> that has its <code>name</code> attribute set to the value <code>application-name</code> and whose <a data-link-type="dfn" href="dom.html#language" id="ref-for-language-4">language</a> is <var>winning language</var>.</p>
        </li></ol>
        <p class="note" role="note"> This algorithm would be used by a browser when it needs a name for the page, for instance,
      to label a bookmark. The languages it would provide to the algorithm would be the user’s
      preferred languages. </p>
       </div>
      </dd><dt data-md="">
       <p><dfn data-dfn-type="dfn" data-noexport="" id="author"><code>author</code><a class="self-link" href="document-metadata.html#author"></a></dfn></p>
      </dt><dd data-md="">
       <p>The value must be a free-form string giving the name of one of the page’s authors.</p>
      </dd><dt data-md="">
       <p><dfn data-dfn-type="dfn" data-noexport="" id="description"><code>description</code><a class="self-link" href="document-metadata.html#description"></a></dfn></p>
      </dt><dd data-md="">
       <p>The value must be a free-form string that describes the page. The value must be appropriate for
  use in a directory of pages, e.g., in a search engine. There must not be more than one <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-21">meta</a></code> element with its <code>name</code> attribute set to the value <code>description</code> per document.</p>
      </dd><dt data-md="">
       <p><dfn data-dfn-type="dfn" data-noexport="" id="generator"><code>generator</code><a class="self-link" href="document-metadata.html#generator"></a></dfn></p>
      </dt><dd data-md="">
       <p>The value must be a free-form string that identifies one of the software packages used to
  generate the document. This value must not be used on pages whose markup is not generated by
  software, e.g., pages whose markup was written by a user in a text editor.</p>
       <div class="example" id="example-a74f3530">
        <a class="self-link" href="document-metadata.html#example-a74f3530"></a> Here is what a tool called "Frontweaver" could include in its output, in the page’s <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-27">head</a></code> element, to identify itself as the tool used to generate the page: 
<pre class="highlight"><span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">generator</span> <span class="na">content=</span><span class="s">"Frontweaver 8.2"</span><span class="nt">&gt;</span>
</pre>
       </div>
      </dd><dt data-md="">
       <p><dfn data-dfn-type="dfn" data-noexport="" id="keywords"><code>keywords</code><a class="self-link" href="document-metadata.html#keywords"></a></dfn></p>
      </dt><dd data-md="">
       <p>The value must be a <a data-link-type="dfn" href="infrastructure.html#set-of-comma-separated-tokens" id="ref-for-set-of-comma-separated-tokens-2">set of comma-separated tokens</a>, each of which is a keyword relevant
  to the page.</p>
       <div class="example" id="example-31415181">
        <a class="self-link" href="document-metadata.html#example-31415181"></a> This page about typefaces on British motorways uses a <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-22">meta</a></code> element to specify
    some keywords that users might use to look for the page: 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE HTML&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en-GB"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Typefaces on UK motorways<span class="nt">&lt;/title&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"british,type face,font,fonts,highway,highways"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
  ...
</pre>
       </div>
       <p class="note" role="note"> Many search engines do not consider such keywords, because this feature has historically
    been used unreliably and even misleadingly as a way to spam search engine results in a way
    that is not helpful for users. </p>
       <div class="impl">
         To obtain the list of keywords that the author has specified as applicable to the page, the
    user agent must run the following steps: 
        <ol>
         <li data-md="">
          <p>Let <var>keywords</var> be an empty list.</p>
         </li><li data-md="">
          <p>For each <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-23">meta</a></code> element with a <code>name</code> attribute and a <code>content</code> attribute and whose <code>name</code> attribute’s value is <code>keywords</code>, run the following substeps:</p>
          <ol>
           <li data-md="">
            <p><a data-link-type="dfn" href="infrastructure.html#split-a-string-on-commas" id="ref-for-split-a-string-on-commas-3">Split the value of the element’s <code>content</code> attribute on commas</a>.</p>
           </li><li data-md="">
            <p>Add the resulting tokens, if any, to <var>keywords</var>.</p>
          </li></ol>
         </li><li data-md="">
          <p>Remove any duplicates from <var>keywords</var>.</p>
         </li><li data-md="">
          <p>Return <var>keywords</var>. This is the list of keywords that the author has specified as
applicable to the page.</p>
        </li></ol>
        <p>User agents should not use this information when there is insufficient confidence in the
    reliability of the value.</p>
        <p class="example" id="example-c8e70a19"><a class="self-link" href="document-metadata.html#example-c8e70a19"></a> For instance, it would be reasonable for a content management system to use the keyword
      information of pages within the system to populate the index of a site-specific search
      engine, but a large-scale content aggregator that used this information would likely find
      that certain users would try to game its ranking mechanism through the use of
      inappropriate keywords. </p>
       </div>
     </dd></dl>
     <h5 class="heading settled" data-level="4.2.5.2" id="other-metadata-names"><span class="secno">4.2.5.2. </span><span class="content">Other metadata names</span><a class="self-link" href="document-metadata.html#other-metadata-names"></a></h5>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="register the names|register the name|metadata names" data-noexport="" id="register-the-names">Extensions to the predefined set of metadata names</dfn> may be registered in the <a href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a>. <a data-link-type="biblio" href="references.html#biblio-whatwgwiki">[WHATWGWIKI]</a></p>
     <p>Anyone is free to edit the WHATWG Wiki MetaExtensions page at any time to add a type. These new
  names must be specified with the following information:</p>
     <dl>
      <dt data-md="">
       <p>Keyword</p>
      </dt><dd data-md="">
       <p>The actual name being defined. The name should not be confusingly similar to any other defined
  name (e.g., differing only in case).</p>
      </dd><dt data-md="">
       <p>Brief description</p>
      </dt><dd data-md="">
       <p>A short non-normative description of what the metadata name’s meaning is, including the format
  the value is required to be in.</p>
      </dd><dt data-md="">
       <p>Specification</p>
      </dt><dd data-md="">
       <p>A link to a more detailed description of the metadata name’s semantics and requirements. It
  could be another page on the Wiki, or a link to an external page.</p>
      </dd><dt data-md="">
       <p>Synonyms</p>
      </dt><dd data-md="">
       <p>A list of other names that have exactly the same processing requirements. Authors should not
  use the names defined to be synonyms, they are only intended to allow user agents to support
  legacy content. Anyone may remove synonyms that are not used in practice; only names that need
  to be processed as synonyms for compatibility with legacy content are to be registered in this
  way.</p>
      </dd><dt data-md="">
       <p>Status</p>
      </dt><dd data-md="">
       <p>One of the following:</p>
       <dl>
        <dt data-md="">
         <p>Proposed</p>
        </dt><dd data-md="">
         <p>The name has not received wide peer review and approval. Someone has proposed it and is, or
  soon will be, using it.</p>
        </dd><dt data-md="">
         <p>Ratified</p>
        </dt><dd data-md="">
         <p>The name has received wide peer review and approval. It has a specification that
  unambiguously defines how to handle pages that use the name, including when they use it in
  incorrect ways.</p>
        </dd><dt data-md="">
         <p>Discontinued</p>
        </dt><dd data-md="">
         <p>The metadata name has received wide peer review and it has been found wanting. Existing
  pages are using this metadata name, but new pages should avoid it. The "brief description"
  and "specification" entries will give details of what authors should use instead, if
  anything.</p>
       </dd></dl>
       <p>If a metadata name is found to be redundant with existing values, it should be removed and
  listed as a synonym for the existing value.</p>
       <p>If a metadata name is registered in the "proposed" state for a period of a month or more
  without being used or specified, then it may be removed from the registry.</p>
       <p>If a metadata name is added with the "proposed" status and found to be redundant with existing
  values, it should be removed and listed as a synonym for the existing value. If a metadata
  name is added with the "proposed" status and found to be harmful, then it should be changed to
  "discontinued" status.</p>
       <p>Anyone can change the status at any time, but should only do so in accordance with the
  definitions above.</p>
     </dd></dl>
     <div class="impl">
       Conformance checkers may use the information given on the WHATWG Wiki MetaExtensions page to
    establish if a value is allowed or not: values defined in this specification or marked as
    "proposed" or "ratified" must be accepted, whereas values marked as "discontinued" or not listed
    in either this specification or on the aforementioned page must be reported as invalid.
    Conformance checkers may cache this information (e.g., for performance reasons or to avoid the
    use of unreliable network connectivity). 
      <p>When an author uses a new metadata name not defined by either this specification or the Wiki
    page, conformance checkers should offer to add the value to the Wiki, with the details described
    above, with the "proposed" status.</p>
     </div>
     <p>Metadata names whose values are to be <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-url">URLs</a> must not be proposed or accepted. Links must be
  represented using the <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-24">link</a></code> element, not the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-24">meta</a></code> element.</p>
     <h5 class="heading settled" data-level="4.2.5.3" id="pragma-directives"><span class="secno">4.2.5.3. </span><span class="content">Pragma directives</span><a class="self-link" href="document-metadata.html#pragma-directives"></a></h5>
     <p>When the <dfn data-dfn-type="dfn" data-noexport="" id="http-equiv"><code>http-equiv</code><a class="self-link" href="document-metadata.html#http-equiv"></a></dfn> attribute is specified on a <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-25">meta</a></code> element,
  the element is a pragma directive.</p>
     <p>The <code>http-equiv</code> attribute is an <a data-link-type="dfn" href="infrastructure.html#enumerated-attributes" id="ref-for-enumerated-attributes-6">enumerated attribute</a>. The following table lists
  the keywords defined for this attribute. The states given in the first cell of the rows with
  keywords give the states to which those keywords map. <span class="impl">Some of the keywords are
  non-conforming, as noted in the last column.</span></p>
     <table id="table-http-equiv">
      <thead>
       <tr>
        <th>State
        </th><th>Keyword
        </th><th>Notes
      </th></tr></thead><tbody>
       <tr class="impl">
        <td><a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-language" id="ref-for-statedef-http-equiv-content-language-1">Content Language</a>
        </td><td><code>content-language</code>
        </td><td>Non-conforming
       </td></tr><tr>
        <td><a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-type" id="ref-for-statedef-http-equiv-content-type-4">Encoding declaration</a>
        </td><td><code>content-type</code>
        </td><td>
       </td></tr><tr>
        <td><a data-link-type="state" href="document-metadata.html#statedef-http-equiv-default-style" id="ref-for-statedef-http-equiv-default-style-1">Default style</a>
        </td><td><code>default-style</code>
        </td><td>
       </td></tr><tr>
        <td><a data-link-type="state" href="document-metadata.html#statedef-http-equiv-refresh" id="ref-for-statedef-http-equiv-refresh-1">Refresh</a>
        </td><td><code>refresh</code>
        </td><td>
       </td></tr><tr class="impl">
        <td><a data-link-type="state" href="document-metadata.html#statedef-http-equiv-set-cookie" id="ref-for-statedef-http-equiv-set-cookie-1">Cookie setter</a>
        </td><td><code>set-cookie</code>
        </td><td>Non-conforming
     </td></tr></tbody></table>
     <div class="impl"> When a <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-26">meta</a></code> element is <a data-link-type="dfn" href="infrastructure.html#document-inserted-into-the-document" id="ref-for-document-inserted-into-the-document-2">inserted into the document</a>, if its <code>http-equiv</code> attribute is present and represents one of the above states, then the
    user agent must run the algorithm appropriate for that state, as described in the following
    list: </div>
     <div class="impl">
      <dl>
       <dt data-md="">
        <p><dfn class="dfn-paneled" data-dfn-for="http-equiv" data-dfn-type="state" data-export="" data-lt="content-language" id="statedef-http-equiv-content-language">Content language state</dfn> (<code>http-equiv="content-language"</code>)</p>
       </dt><dd data-md="">
        <p class="note" role="note"> This feature is non-conforming. Authors are encouraged to use the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-26">lang</a></code> attribute instead. </p>
        <p>This pragma sets the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="pragma-set-default-language">pragma-set default language</dfn>. Until such a pragma is
successfully processed, there is no <a data-link-type="dfn" href="document-metadata.html#pragma-set-default-language" id="ref-for-pragma-set-default-language-3">pragma-set default language</a>.</p>
        <ol>
         <li data-md="">
          <p>If the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-27">meta</a></code> element has no <code>content</code> attribute, then abort these
steps.</p>
         </li><li data-md="">
          <p>If the element’s <code>content</code> attribute contains a U+002C COMMA character (,)
then abort these steps.</p>
         </li><li data-md="">
          <p>Let <var>input</var> be the value of the element’s <code>content</code> attribute.</p>
         </li><li data-md="">
          <p>Let <var>position</var> point at the first character of <var>input</var>.</p>
         </li><li data-md="">
          <p><a data-link-type="dfn" href="infrastructure.html#skip-whitespace" id="ref-for-skip-whitespace-13">Skip whitespace</a>.</p>
         </li><li data-md="">
          <p><a data-link-type="dfn" href="infrastructure.html#collect-a-sequence-of-characters" id="ref-for-collect-a-sequence-of-characters-30">Collect a sequence of characters</a> that are not <a data-link-type="dfn" href="infrastructure.html#space-characters" id="ref-for-space-characters-31">space characters</a>.</p>
         </li><li data-md="">
          <p>Let <var>candidate</var> be the string that resulted from the previous step.</p>
         </li><li data-md="">
          <p>If <var>candidate</var> is the empty string, abort these steps.</p>
         </li><li data-md="">
          <p>Set the <a data-link-type="dfn" href="document-metadata.html#pragma-set-default-language" id="ref-for-pragma-set-default-language-4">pragma-set default language</a> to <var>candidate</var>.</p>
          <p class="note" role="note"> If the value consists of multiple space-separated tokens, tokens after the first are
  ignored. </p>
        </li></ol>
        <p class="note" role="note"> This pragma is not the same as the HTTP <code>Content-Language</code> header of the same name.
  HTTP <code>Content-Language</code> values with more than one language tag will be rejected as invalid by this pragma. <a data-link-type="biblio" href="references.html#biblio-http">[HTTP]</a> </p>
      </dd></dl>
     </div>
     <dl>
      <dt data-md="">
       <p><dfn class="dfn-paneled" data-dfn-for="http-equiv" data-dfn-type="state" data-export="" data-lt="content-type|encoding declaration state" id="statedef-http-equiv-content-type">Encoding declaration state</dfn> (<code>http-equiv="content-type"</code>)</p>
      </dt><dd data-md="">
       <p>The <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-type" id="ref-for-statedef-http-equiv-content-type-5">encoding declaration state</a> is just an alternative form of setting the <code>charset</code> attribute: it is a <a data-link-type="dfn" href="document-metadata.html#character-encoding-declaration" id="ref-for-character-encoding-declaration-6">character encoding declaration</a>. <span class="impl">This state’s user agent requirements are all handled by the parsing section
  of the specification.</span></p>
       <p>For <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-28">meta</a></code> elements with an <code>http-equiv</code> attribute in the <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-type" id="ref-for-statedef-http-equiv-content-type-6">encoding declaration state</a>, the <code>content</code> attribute must have a value that is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-11">ASCII case-insensitive</a> match for a string that consists of: the literal string
  "<code>text/html;</code>", optionally followed by any number of <a data-link-type="dfn" href="infrastructure.html#space-characters" id="ref-for-space-characters-32">space characters</a>,
  followed by the literal string "<code>charset=</code>", followed by one of the <a data-link-type="dfn" href="infrastructure.html#character-encoding" id="ref-for-character-encoding-6">labels</a> of the <a data-link-type="dfn" href="infrastructure.html#character-encoding" id="ref-for-character-encoding-7">character encoding</a> of the <a data-link-type="dfn" href="document-metadata.html#character-encoding-declaration" id="ref-for-character-encoding-declaration-7">character encoding declaration</a>.</p>
       <p>A document must not contain both a <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-29">meta</a></code> element with an <code>http-equiv</code> attribute in the <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-type" id="ref-for-statedef-http-equiv-content-type-7">encoding declaration state</a> and a <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-30">meta</a></code> element with the <code>charset</code> attribute present.</p>
       <p>The <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-type" id="ref-for-statedef-http-equiv-content-type-8">encoding declaration state</a> may be used in <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-11">HTML documents</a> and in <a data-link-type="dfn" href="infrastructure.html#xml-document" id="ref-for-xml-document-10">XML Documents</a>. If the <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-type" id="ref-for-statedef-http-equiv-content-type-9">encoding declaration state</a> is used in <a data-link-type="dfn" href="infrastructure.html#xml-document" id="ref-for-xml-document-11">XML Documents</a>, the name of the <a data-link-type="dfn" href="infrastructure.html#character-encoding" id="ref-for-character-encoding-8">character encoding</a> must be an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-12">ASCII case-insensitive</a> match for the string "<code>UTF-8</code>" (and  the document is
  therefore forced to use UTF-8 as its encoding).</p>
       <p class="note" role="note"> The <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-type" id="ref-for-statedef-http-equiv-content-type-10">encoding declaration state</a> has no effect in XML documents, and is only allowed in
    order to facilitate migration to and from XHTML. </p>
      </dd><dt data-md="">
       <p><dfn class="dfn-paneled" data-dfn-for="http-equiv" data-dfn-type="state" data-export="" data-lt="default-style" id="statedef-http-equiv-default-style">Default style state</dfn> (<code>http-equiv="default-style"</code>)</p>
      </dt><dd data-md="">
       <p>This pragma sets the name of the default <a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#enabled-css-style-sheet-set">alternative style sheet set</a>.</p>
       <div class="impl">
        <ol>
         <li data-md="">
          <p>If the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-31">meta</a></code> element has no <code>content</code> attribute, or if that
attribute’s value is the empty string, then abort these steps.</p>
         </li><li data-md="">
          <p>Set the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#enabled-css-style-sheet-set">preferred style sheet set</a> to the value of the element’s <code>content</code> attribute. <a data-link-type="biblio" href="references.html#biblio-cssom">[CSSOM]</a></p>
        </li></ol>
       </div>
      </dd><dt data-md="">
       <p><dfn class="dfn-paneled" data-dfn-for="http-equiv" data-dfn-type="state" data-export="" data-lt="refresh" id="statedef-http-equiv-refresh">Refresh state</dfn> (<code>http-equiv="refresh"</code>)</p>
      </dt><dd data-md="">
       <p>This pragma acts as timed redirect.</p>
       <ol>
        <li data-md="">
         <p>If another <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-32">meta</a></code> element with an <code>http-equiv</code> attribute in the <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-refresh" id="ref-for-statedef-http-equiv-refresh-2">Refresh state</a> has already been successfully processed (i.e., when it was inserted
the user agent processed it and reached the step labeled <i>end</i>), then abort
these steps.</p>
        </li><li data-md="">
         <p>If the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-33">meta</a></code> element has no <code>content</code> attribute, or if that
attribute’s value is the empty string, then abort these steps.</p>
        </li><li data-md="">
         <p>Let <var>input</var> be the value of the element’s <code>content</code> attribute.</p>
        </li><li data-md="">
         <p>Let <var>position</var> point at the first character of <var>input</var>.</p>
        </li><li data-md="">
         <p><a data-link-type="dfn" href="infrastructure.html#skip-whitespace" id="ref-for-skip-whitespace-14">Skip whitespace</a>.</p>
        </li><li data-md="">
         <p><a data-link-type="dfn" href="infrastructure.html#collect-a-sequence-of-characters" id="ref-for-collect-a-sequence-of-characters-31">Collect a sequence of characters</a> that are <a data-link-type="dfn" href="infrastructure.html#ascii-digits" id="ref-for-ascii-digits-63">ASCII digits</a>, and parse the
resulting string using the <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-4">rules for parsing non-negative integers</a>. If the
sequence of characters collected is the empty string, then no number will have been
parsed; abort these steps. Otherwise, let <var>time</var> be the parsed number.</p>
        </li><li data-md="">
         <p><a data-link-type="dfn" href="infrastructure.html#collect-a-sequence-of-characters" id="ref-for-collect-a-sequence-of-characters-32">Collect a sequence of characters</a> that are <a data-link-type="dfn" href="infrastructure.html#ascii-digits" id="ref-for-ascii-digits-64">ASCII digits</a> and U+002E FULL STOP
characters (.). Ignore any collected characters.</p>
        </li><li data-md="">
         <p>Let <var>url</var> be the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-34">meta</a></code> element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>’s <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-url">URL</a>.</p>
        </li><li data-md="">
         <p>If <var>position</var> is past the end of <var>input</var>, jump to the step labeled <i>end</i>.</p>
        </li><li data-md="">
         <p>If the character in <var>input</var> pointed to by <var>position</var> is not a U+003B
SEMICOLON character (;), a U+002C COMMA character (,), or a <a data-link-type="dfn" href="infrastructure.html#space-characters" id="ref-for-space-characters-33">space character</a>, then
abort these steps.</p>
        </li><li data-md="">
         <p><a data-link-type="dfn" href="infrastructure.html#skip-whitespace" id="ref-for-skip-whitespace-15">Skip whitespace</a>.</p>
        </li><li data-md="">
         <p>If the character in <var>input</var> pointed to by <var>position</var> is a U+003B
SEMICOLON character (;), a U+002C COMMA character (,), then advance <var>position</var> to the next character.</p>
        </li><li data-md="">
         <p><a data-link-type="dfn" href="infrastructure.html#skip-whitespace" id="ref-for-skip-whitespace-16">Skip whitespace</a>.</p>
        </li><li data-md="">
         <p>If <var>position</var> is past the end of <var>input</var>, jump to the step labeled <i>end</i>.</p>
        </li><li data-md="">
         <p>Let <var>url</var> be equal to the substring of <var>input</var> from the character at <var>position</var> to the end of the string.</p>
        </li><li data-md="">
         <p>If the character in <var>input</var> pointed to by <var>position</var> is a U+0055 LATIN
CAPITAL LETTER U character (U) or a U+0075 LATIN SMALL LETTER U character (u), then
advance <var>position</var> to the next character. Otherwise, jump to the step labeled <i>skip quotes</i>.</p>
        </li><li data-md="">
         <p>If the character in <var>input</var> pointed to by <var>position</var> is a U+0052 LATIN
CAPITAL LETTER R character (R) or a U+0072 LATIN SMALL LETTER R character (r), then
advance <var>position</var> to the next character. Otherwise, jump to the step labeled <var>Parse</var>.</p>
        </li><li data-md="">
         <p>If the character in <var>input</var> pointed to by <var>position</var> is s U+004C LATIN
CAPITAL LETTER L character (L) or a U+006C LATIN SMALL LETTER L character (l), then
advance <var>position</var> to the next character. Otherwise, jump to the step labeled <var>Parse</var>.</p>
        </li><li data-md="">
         <p><a data-link-type="dfn" href="infrastructure.html#skip-whitespace" id="ref-for-skip-whitespace-17">Skip whitespace</a>.</p>
        </li><li data-md="">
         <p>If the character in <var>input</var> pointed to by <var>position</var> is a U+003D
EQUALS SIGN (=), then advance <var>position</var> to the next character. Otherwise, jump
to the step step labeled <var>Parse</var>.</p>
        </li><li data-md="">
         <p><a data-link-type="dfn" href="infrastructure.html#skip-whitespace" id="ref-for-skip-whitespace-18">Skip whitespace</a>.</p>
        </li><li data-md="">
         <p><i>Skip quotes</i>: If the character in <var>input</var> pointed to by <var>position</var> is either a U+0027 APOSTROPHE character (') or U+0022 QUOTATION MARK
character ("), then let <var>quote</var> be that character, and advance <var>position</var> to the next character. Otherwise, let <var>quote</var> be the empty
string.</p>
        </li><li data-md="">
         <p>Let <var>url</var> be equal to the substring of <var>input</var> from the character at <var>position</var> to the end of the string.</p>
        </li><li data-md="">
         <p>If <var>quote</var> is not the empty string, and there is a character in <var>url</var> equal to <var>quote</var>, then truncate <var>url</var> at that character, so that it
and all subsequent characters are removed.</p>
        </li><li data-md="">
         <p><var>Parse</var>: <a data-link-type="dfn" href="infrastructure.html#reparsed" id="ref-for-reparsed-11">Parse</a> <var>url</var> relative to the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-35">meta</a></code> element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>. If that fails, abort these steps. Otherwise, let <var>urlRecord</var> be the <a data-link-type="dfn" href="infrastructure.html#resulting-url-record" id="ref-for-resulting-url-record-6">resulting URL record</a>.</p>
        </li><li data-md="">
         <p><i>End</i>: Perform one or more of the following steps:</p>
         <ul>
          <li data-md="">
           <p>After the refresh has come due (as defined below), if the user has not canceled the
redirect and if the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-36">meta</a></code> element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>’s <a data-link-type="dfn" href="browsers.html#active-sandboxing-flag-set" id="ref-for-active-sandboxing-flag-set-1">active
sandboxing flag set</a> does not have the <a data-link-type="dfn" href="browsers.html#sandboxed-automatic-features-browsing-context-flag" id="ref-for-sandboxed-automatic-features-browsing-context-flag-1">sandboxed automatic features browsing
context flag</a> set, <a data-link-type="dfn" href="browsers.html#navigated" id="ref-for-navigated-10">navigate</a> the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>'s <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-18">browsing context</a> to <var>urlRecord</var>, with <a data-link-type="dfn" href="browsers.html#replacement-must-be-enabled" id="ref-for-replacement-must-be-enabled-2">replacement enabled</a>,
and with the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>'s <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-19">browsing context</a> as the <a data-link-type="dfn" href="browsers.html#source-browsing-context" id="ref-for-source-browsing-context-4">source browsing context</a>.</p>
           <p>For the purposes of the previous paragraph, a refresh is said to have come due as
soon as the <em>later</em> of the following two conditions occurs:</p>
           <ul>
            <li data-md="">
             <p>At least <var>time</var> seconds have elapsed since the document has <a data-link-type="dfn" href="syntax.html#completely-loaded" id="ref-for-completely-loaded-2">completely loaded</a>, adjusted to take into account user or user agent
preferences.</p>
            </li><li data-md="">
             <p>At least <var>time</var> seconds have elapsed since the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-37">meta</a></code> element
was <a data-link-type="dfn" href="infrastructure.html#document-inserted-into-the-document" id="ref-for-document-inserted-into-the-document-3">inserted into the document</a>, adjusted to take into account
user or user agent preferences.</p>
           </li></ul>
          </li><li data-md="">
           <p>Provide the user with an interface that, when selected, <a data-link-type="dfn" href="browsers.html#navigated" id="ref-for-navigated-11">navigates</a> a <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-20">browsing context</a> to <var>urlRecord</var>, with the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>'s <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-21">browsing context</a> as the <a data-link-type="dfn" href="browsers.html#source-browsing-context" id="ref-for-source-browsing-context-5">source browsing context</a>.</p>
          </li><li data-md="">
           <p>Do nothing.</p>
         </li></ul>
         <p>In addition, the user agent may, as with anything, inform the user of any and all
aspects of its operation, including the state of any timers, the destinations of any
timed redirects, and so forth.</p>
       </li></ol>
       <p>For <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-38">meta</a></code> elements with an <code>http-equiv</code> attribute in the <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-refresh" id="ref-for-statedef-http-equiv-refresh-3">Refresh state</a>, the <code>content</code> attribute must have a value consisting either
  of:</p>
       <ul>
        <li data-md="">
         <p>just a <a data-link-type="dfn" href="infrastructure.html#valid-non-negative-integer" id="ref-for-valid-non-negative-integer-5">valid non-negative integer</a>, or</p>
        </li><li data-md="">
         <p>a <a data-link-type="dfn" href="infrastructure.html#valid-non-negative-integer" id="ref-for-valid-non-negative-integer-6">valid non-negative integer</a>, followed by a U+003B SEMICOLON character (;), followed
by one or more <a data-link-type="dfn" href="infrastructure.html#space-characters" id="ref-for-space-characters-34">space characters</a>, followed by a substring that is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-13">ASCII case-insensitive</a> match for the string "<code>URL</code>", followed by a U+003D
EQUALS SIGN character (=), followed by a <a data-link-type="dfn" href="infrastructure.html#valid-url" id="ref-for-valid-url-3">valid URL</a> that does not start with a literal
U+0027 APOSTROPHE (') or U+0022 QUOTATION MARK (") character.</p>
       </li></ul>
       <p>In the former case, the integer represents a number of seconds before the page is to be
  reloaded; in the latter case the integer represents a number of seconds before the page is to
  be replaced by the page at the given <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-url">URL</a>.</p>
       <div class="example" id="example-f7444516">
        <a class="self-link" href="document-metadata.html#example-f7444516"></a> A news organization’s front page could include the following markup in the page’s <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-28">head</a></code> element, to ensure that the page automatically reloads from the server
    every five minutes: 
<pre class="highlight"><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Refresh"</span> <span class="na">content=</span><span class="s">"300"</span><span class="nt">&gt;</span>
</pre>
       </div>
       <div class="example" id="example-c40c3a09">
        <a class="self-link" href="document-metadata.html#example-c40c3a09"></a> A sequence of pages could be used as an automated slide show by making each page refresh to
    the next page in the sequence, using markup such as the following: 
<pre class="highlight"><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Refresh"</span> <span class="na">content=</span><span class="s">"20; URL=page4.html"</span><span class="nt">&gt;</span>
</pre>
       </div>
       <dl>
        <dt data-md="">
         <p><dfn class="dfn-paneled" data-dfn-for="http-equiv" data-dfn-type="state" data-export="" data-lt="set-cookie" id="statedef-http-equiv-set-cookie">Cookie setter</dfn> (<code>http-equiv="set-cookie"</code>)</p>
        </dt><dd data-md="">
         <p>This pragma sets an HTTP cookie. <a data-link-type="biblio" href="references.html#biblio-cookies">[COOKIES]</a></p>
         <p>It is non-conforming. Real HTTP headers should be used instead.</p>
         <ol>
          <li data-md="">
           <p>If the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-39">meta</a></code> element has no <code>content</code> attribute, or if that
attribute’s value is the empty string, then abort these steps.</p>
          </li><li data-md="">
           <p>Act as if <a data-link-type="dfn" href="https://tools.ietf.org/html/rfc6265#section-4.1">receiving a set-cookie-string</a> for <a data-link-type="dfn" href="dom.html#the-document-address" id="ref-for-the-document-address-11">the document’s address</a> via a
"non-HTTP" API, consisting of the value of the element’s <code>content</code> attribute <a data-link-type="dfn" href="https://www.w3.org/TR/encoding/#utf-8-encoder">encoded as UTF-8</a>. <a data-link-type="biblio" href="references.html#biblio-cookies">[COOKIES]</a> <a data-link-type="biblio" href="references.html#biblio-encoding">[ENCODING]</a></p>
         </li></ol>
        </dd><dt data-md="">
         <p><dfn class="dfn-paneled" data-dfn-for="http-equiv" data-dfn-type="state" data-export="" id="statedef-http-equiv-content-security-policy-state">Content security policy state</dfn> (<code>http-equiv="content-security-policy"</code>)</p>
        </dt><dd data-md="">
         <p>This pragma <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#enforced">enforces</a> a <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#policy">Content Security Policy</a> on a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>. <a data-link-type="biblio" href="references.html#biblio-csp3">[CSP3]</a></p>
         <ol>
          <li data-md="">
           <p>If the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-40">meta</a></code> element is not a child of a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-29">head</a></code> element, abort these steps.</p>
          </li><li data-md="">
           <p>If the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-41">meta</a></code> element has no <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-meta-content" id="ref-for-element-attrdef-meta-content-1">content</a></code> attribute, or if that attribute’s value
is the empty string, then abort these steps.</p>
          </li><li data-md="">
           <p>Let <var>policy</var> be the result of executing Content Security Policy’s <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#parse-serialized-policy">parse a serialized Content Security Policy</a> algorithm on the <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-42">meta</a></code> element’s <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-meta-content" id="ref-for-element-attrdef-meta-content-2">content</a></code> attribute’s value.</p>
          </li><li data-md="">
           <p>Remove all occurrences of the <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#report-uri"><code>report-uri</code></a>, <a data-link-type="dfn" href="https://w3c.github.io/webappsec-csp/#frame-ancestors"><code>frame-ancestors</code></a>, and <a data-link-type="dfn" href="https://www.w3.org/TR/CSP/#directive-sandbox"><code>sandbox</code></a> <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#directives">directives</a> from <var>policy</var>.</p>
          </li><li data-md="">
           <p><a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#enforced">Enforce the policy</a> <var>policy</var>.</p>
         </li></ol>
         <p>For <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-43">meta</a></code> elements with an <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-meta-http-equiv" id="ref-for-element-attrdef-meta-http-equiv-2">http-equiv</a></code> attribute in the <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-security-policy-state" id="ref-for-statedef-http-equiv-content-security-policy-state-1">Content security policy state</a>, the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-meta-content" id="ref-for-element-attrdef-meta-content-3">content</a></code> attribute
must have a value consisting of a <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#grammardef-serialized-policy">valid Content Security Policy</a>, but must not contain
any <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#report-uri"><code>report-uri</code></a>, <a data-link-type="dfn" href="https://w3c.github.io/webappsec-csp/#frame-ancestors"><code>frame-ancestors</code></a>, or <a data-link-type="dfn" href="https://www.w3.org/TR/CSP/#directive-sandbox"><code>sandbox</code></a> <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#directives">directives</a>. The <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#policy">Content Security Policy</a> given in
the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-meta-content" id="ref-for-element-attrdef-meta-content-4">content</a></code> attribute will be <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#enforced">enforced</a> upon the current document. <a data-link-type="biblio" href="references.html#biblio-csp3">[CSP3]</a></p>
         <div class="example" id="example-51ac90d3">
          <a class="self-link" href="document-metadata.html#example-51ac90d3"></a> A page might choose to mitigate the risk of cross-site scripting attacks by preventing the
execution of inline JavaScript, as well as blocking all plugin content, using a policy such
as the following: 
<pre class="highlight"><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Security-Policy"</span> <span class="na">content=</span><span class="s">"script-src 'self'; object-src 'none'"</span><span class="nt">&gt;</span>
</pre>
         </div>
       </dd></dl>
     </dd></dl>
     <p>There must not be more than one <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-44">meta</a></code> element with any particular state in the
  document at a time.</p>
     <h5 class="heading settled" data-level="4.2.5.4" id="other-pragma-directives"><span class="secno">4.2.5.4. </span><span class="content">Other pragma directives</span><a class="self-link" href="document-metadata.html#other-pragma-directives"></a></h5>
     <p><dfn data-dfn-type="dfn" data-noexport="" id="extensions-to-the-predefined-set-of-pragma-directives">Extensions to the predefined set of pragma directives<a class="self-link" href="document-metadata.html#extensions-to-the-predefined-set-of-pragma-directives"></a></dfn> may, under certain conditions, be
  registered in the <a data-link-type="dfn" href="https://wiki.whatwg.org/wiki/PragmaExtensions#content">WHATWG Wiki PragmaExtensions page</a>. <a data-link-type="biblio" href="references.html#biblio-whatwgwiki">[WHATWGWIKI]</a></p>
     <p>Such extensions must use a name that is identical to an HTTP header registered in the Permanent
  Message Header Field Registry, and must have behavior identical to that described for the HTTP
  header. <a data-link-type="biblio" href="references.html#biblio-ianapermheaders">[IANAPERMHEADERS]</a></p>
     <p>Pragma directives corresponding to headers describing metadata, or not requiring specific user
  agent processing, must not be registered; instead, use <a data-link-type="dfn" href="document-metadata.html#register-the-names" id="ref-for-register-the-names-2">metadata names</a>. Pragma directives
  corresponding to headers that affect the HTTP processing model (e.g., caching) must not be
  registered, as they would result in HTTP-level behavior being different for user agents that
  implement HTML than for user agents that do not.</p>
     <p>Anyone is free to edit the <a data-link-type="dfn" href="https://wiki.whatwg.org/wiki/PragmaExtensions#content">WHATWG Wiki PragmaExtensions page</a> at any time to add a pragma directive
  satisfying these conditions. Such registrations must specify the following information:</p>
     <dl>
      <dt data-md="">
       <p>Keyword</p>
      </dt><dd data-md="">
       <p>The actual name being defined. The name must match a previously-registered HTTP name with the
  same requirements.</p>
      </dd><dt data-md="">
       <p>Brief description</p>
      </dt><dd data-md="">
       <p>A short non-normative description of the purpose of the pragma directive.</p>
      </dd><dt data-md="">
       <p>Specification</p>
      </dt><dd data-md="">
       <p>A link to the specification defining the corresponding HTTP header.</p>
     </dd></dl>
     <div class="impl"> Conformance checkers must use the information given on the <a data-link-type="dfn" href="https://wiki.whatwg.org/wiki/PragmaExtensions#content">WHATWG Wiki PragmaExtensions page</a> to
    establish if a value is allowed or not: values defined in this specification or listed on the
    aforementioned page must be accepted, whereas values not listed in either this specification or
    on the aforementioned page must be rejected as invalid. Conformance checkers may cache this
    information (e.g., for performance reasons or to avoid the use of unreliable network
    connectivity). </div>
     <h5 class="heading settled" data-level="4.2.5.5" id="specifying-the-documents-character-encoding"><span class="secno">4.2.5.5. </span><span class="content">Specifying the document’s character encoding</span><a class="self-link" href="document-metadata.html#specifying-the-documents-character-encoding"></a></h5>
     <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="character-encoding-declaration">character encoding declaration</dfn> is a mechanism by which the <a data-link-type="dfn" href="infrastructure.html#character-encoding" id="ref-for-character-encoding-9">character encoding</a> used to store or transmit a document is specified.</p>
     <p>The following restrictions apply to <a data-link-type="dfn" href="document-metadata.html#character-encoding-declaration" id="ref-for-character-encoding-declaration-8">character encoding declarations</a>:</p>
     <ul>
      <li data-md="">
       <p>The character encoding name given must be an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-14">ASCII case-insensitive</a> match for one of the <a data-link-type="dfn" href="infrastructure.html#character-encoding" id="ref-for-character-encoding-10">labels</a> of the <a data-link-type="dfn" href="infrastructure.html#character-encoding" id="ref-for-character-encoding-11">character encoding</a> used to serialize the file. <a data-link-type="biblio" href="references.html#biblio-encoding">[ENCODING]</a></p>
      </li><li data-md="">
       <p>The character encoding declaration must be serialized without the use of <a data-link-type="dfn" href="syntax.html#character-references" id="ref-for-character-references-1">character references</a> or character escapes of any kind.</p>
      </li><li data-md="">
       <p>The element containing the character encoding declaration must be serialized completely
  within <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="the-first-1024-bytes">the first 1024 bytes</dfn> of the document.</p>
     </li></ul>
     <p>In addition, due to a number of restrictions on <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-45">meta</a></code> elements, there can only be one <code>meta</code>-based character encoding declaration per document.</p>
     <p>If an <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-12">HTML document</a> does not start with a BOM, and its <a data-link-type="dfn" href="https://www.w3.org/TR/encoding/#encoding">encoding</a> is not explicitly
  given by <a data-link-type="dfn" href="infrastructure.html#content-type-metadata" id="ref-for-content-type-metadata-7">Content-Type metadata</a>, and the document is not <a data-link-type="dfn" href="semantics-embedded-content.html#iframe-iframe-srcdoc-document" id="ref-for-iframe-iframe-srcdoc-document-5">an <code>iframe</code> <code>srcdoc</code> document</a>, then the character encoding used must be an <a data-link-type="dfn" href="infrastructure.html#ascii-compatible-encoding" id="ref-for-ascii-compatible-encoding-2">ASCII-compatible encoding</a>, and the encoding must be specified using a <code>meta</code> element with a <code>charset</code> attribute or a <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-46">meta</a></code> element with an <code>http-equiv</code> attribute in the <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-type" id="ref-for-statedef-http-equiv-content-type-11">encoding declaration state</a>.</p>
     <p class="note" role="note"> A character encoding declaration is required (either in the <a data-link-type="dfn" href="infrastructure.html#content-type-metadata" id="ref-for-content-type-metadata-8">Content-Type metadata</a> or
    explicitly in the file) even if the encoding is US-ASCII, because a character encoding is needed
    to process non-ASCII characters entered by the user in forms, in URLs generated by scripts, and
    so forth. </p>
     <p>If the document is <a data-link-type="dfn" href="semantics-embedded-content.html#iframe-iframe-srcdoc-document" id="ref-for-iframe-iframe-srcdoc-document-6">an <code>iframe</code> <code>srcdoc</code> document</a>, the document must
  not have a <a data-link-type="dfn" href="document-metadata.html#character-encoding-declaration" id="ref-for-character-encoding-declaration-9">character encoding declaration</a>. (In this case, the source is already decoded,
  since it is part of the document that contained the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-15">iframe</a></code>.)</p>
     <p>If an <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-13">HTML document</a> contains a <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-47">meta</a></code> element with a <code>charset</code> attribute or a <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-48">meta</a></code> element with an <code>http-equiv</code> attribute in the <a data-link-type="state" href="document-metadata.html#statedef-http-equiv-content-type" id="ref-for-statedef-http-equiv-content-type-12">encoding declaration state</a>, then the character encoding used must be an <a data-link-type="dfn" href="infrastructure.html#ascii-compatible-encoding" id="ref-for-ascii-compatible-encoding-3">ASCII-compatible encoding</a>.</p>
     <p>Authors should use <a data-link-type="dfn" href="syntax.html#utf-8" id="ref-for-utf-8-2">UTF-8</a>. Conformance checkers may advise authors against using legacy encodings. <a data-link-type="biblio" href="references.html#biblio-encoding">[ENCODING]</a></p>
     <p>Authoring tools should default to using <a data-link-type="dfn" href="syntax.html#utf-8" id="ref-for-utf-8-3">UTF-8</a> for newly-created documents. <a data-link-type="biblio" href="references.html#biblio-encoding">[ENCODING]</a></p>
     <p>Authors must not use encodings that are not defined in the WHATWG Encoding standard. Additionally,
  authors should not use <a data-link-type="dfn" href="syntax.html#iso-2022-jp" id="ref-for-iso-2022-jp-1">ISO-2022-JP</a>. <a data-link-type="biblio" href="references.html#biblio-encoding">[ENCODING]</a></p>
     <p class="note" role="note"> Some encodings that are not defined in the WHATWG Encoding standard use bytes in the range 0x20
    to 0x7E, inclusive, to encode characters other than the corresponding characters in the range
    U+0020 to U+007E, inclusive, and represent a potential security vulnerability: A user agent
    might end up interpreting supposedly benign plain text content as HTML tags and JavaScript. </p>
     <p class="note" role="note"> Using non-UTF-8 encodings can have unexpected results on form submission and URL encodings,
    which use the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-document-encoding">document’s character encoding</a> by default. </p>
     <p>In XHTML, the XML declaration should be used for inline character encoding information, if
  necessary.</p>
     <div class="example" id="example-779910d5">
      <a class="self-link" href="document-metadata.html#example-779910d5"></a> In HTML, to declare that the character encoding is UTF-8, the author could include the following
    markup near the top of the document (in the <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-30">head</a></code> element): 
<pre class="highlight"><span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
</pre>
      <p>In XML, the XML declaration would be used instead, at the very top of the markup:</p>
<pre class="highlight"><span class="cp">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.2.6" id="the-style-element"><span class="secno">4.2.6. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-style"><code>style</code></dfn> element</span><a class="self-link" href="document-metadata.html#the-style-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-8">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-10">Metadata content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-7">Contexts in which this element can be used</a>:
      </dt><dd> Where <a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-11">metadata content</a> is expected. 
      </dd><dd> In a <code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-7">noscript</a></code> element that is a
      child of a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-31">head</a></code> element. 
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-10">Content model</a>:
      </dt><dd> Depends on the value of the <code>type</code> attribute, but must match requirements described
      in prose below. 
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-7">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-8">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-7">Global attributes</a>
      </dd><dd><code>media</code> — Applicable media
      </dd><dd><code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-style-nonce" id="ref-for-element-attrdef-style-nonce-1">nonce</a></code> - Cryptographic nonce used in <em>Content Security Policy</em> checks <a data-link-type="biblio" href="references.html#biblio-csp3">[CSP3]</a>
      </dd><dd><code>type</code> — Type of embedded resource
      </dd><dd> Also, the <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-style-title" id="ref-for-element-attrdef-style-title-1">title</a></code> attribute has special semantics on this element: Alternative
      style sheet set name. 
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd>None
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-9">Global aria-* attributes</a>
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-7">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLStyleElement" data-dfn-type="interface" data-export="" id="htmlstyleelement-htmlstyleelement">HTMLStyleElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-17">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmlstyleelement-media" id="ref-for-dom-htmlstyleelement-media-1">media</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmlstyleelement-nonce" id="ref-for-dom-htmlstyleelement-nonce-1">nonce</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="document-metadata.html#dom-htmlstyleelement-type" id="ref-for-dom-htmlstyleelement-type-1">type</a>;
};
<a class="n" data-link-type="idl-name" href="document-metadata.html#htmlstyleelement-htmlstyleelement" id="ref-for-htmlstyleelement-htmlstyleelement-1">HTMLStyleElement</a> <span class="kt">implements</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/cssom-1/#linkstyle">LinkStyle</a>;
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-7">style</a></code> element allows authors to embed style information in their documents. The <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-8">style</a></code> element is one of several inputs to the styling processing model. The element
  does not <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-9">represent</a> content for the user.</p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="style" data-dfn-type="element-attr" data-export="" id="element-attrdef-style-type"><code>type</code></dfn> attribute gives the styling language. If the attribute is
  present, its value must be a <a data-link-type="dfn" href="infrastructure.html#valid-mime-type" id="ref-for-valid-mime-type-4">valid mime type</a> that designates a styling language. The <code>charset</code> parameter must not be specified. The default value for the <code>type</code> attribute, which is used if the attribute is absent, is "<code>text/css</code>". <a data-link-type="biblio" href="references.html#biblio-rfc2318">[RFC2318]</a></p>
     <div class="impl"> When examining types to determine if they support the language, user agents must not ignore
    unknown MIME parameters — types with unknown parameters must be assumed to be unsupported. The <code>charset</code> parameter must be treated as an unknown parameter for the purpose of
    comparing <a data-link-type="dfn" href="infrastructure.html#mime-type" id="ref-for-mime-type-11">MIME types</a> here. </div>
     <p>The <dfn class="dfn-paneled" data-dfn-for="style" data-dfn-type="element-attr" data-export="" id="element-attrdef-style-media"><code>media</code></dfn> attribute says which media the styles apply to. The value must
  be a <a data-link-type="dfn" href="infrastructure.html#valid-media-query-list" id="ref-for-valid-media-query-list-2">valid media query list</a>. <span class="impl">The user agent must apply the styles when
  the <code>media</code> attribute’s value <a data-link-type="dfn" href="infrastructure.html#match-the-environment" id="ref-for-match-the-environment-2">matches the environment</a> and the other relevant
  conditions apply, and must not apply them otherwise.</span></p>
     <div class="impl">
      <p class="note" role="note"> The styles might be further limited in scope, e.g., in CSS with the use of <code>@media</code> blocks. This specification does not override such further restrictions or requirements. </p>
     </div>
     <p>The default, if the <code>media</code> attribute is omitted, is "<code>all</code>", meaning that
  by default styles apply to all media.</p>
     <p class="note" role="note"> A <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-9">style</a></code> element is restricted to
    appearing in the <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-32">head</a></code> of the document. </p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="style" data-dfn-type="element-attr" data-export="" id="element-attrdef-style-nonce"><code>nonce</code></dfn> attribute represents a cryptographic
  nonce ("number used once") which can be used by <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#policy">Content Security Policy</a> to determine
  whether or not the style specified by an element will be applied to the document. The value is
  text. <a data-link-type="biblio" href="references.html#biblio-csp3">[CSP3]</a></p>
     <p>The <dfn class="dfn-paneled" data-dfn-for="style" data-dfn-type="element-attr" data-export="" id="element-attrdef-style-title"><code>title</code></dfn> attribute on <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-10">style</a></code> elements defines <a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#enabled-css-style-sheet-set">alternative style sheet sets</a>. If the <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-11">style</a></code> element has no <code>title</code> attribute, then it has no title; the <code>title</code> attribute of ancestors does not apply to
  the <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-12">style</a></code> element. <a data-link-type="biblio" href="references.html#biblio-cssom">[CSSOM]</a></p>
     <p class="note" role="note"> The <code>title</code> attribute on <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-13">style</a></code> elements, like the <code>title</code> attribute on <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-25">link</a></code> elements, differs from the global <code>title</code> attribute in
    that a <code>style</code> block without a title does not inherit the title of the parent
    element: it merely has no title. </p>
     <p>The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> of a <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-14">style</a></code> element must match the <code>style</code> production in the following ABNF, the character set for which is Unicode. <a data-link-type="biblio" href="references.html#biblio-abnf">[ABNF]</a></p>
<pre data-highlight="abnf">style         = no-c-start *( c-start no-c-end c-end no-c-start )
no-c-start    = &lt; any string that doesn’t contain a substring that matches c-start &gt;
c-start       = "&lt;!--"
no-c-end      = &lt; any string that doesn’t contain a substring that matches c-end &gt;
c-end         = "--&gt;"
</pre>
     <hr>
     <div class="impl">
       The user agent must run the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="update-a-style-block">update a <code>style</code> block</dfn> algorithm that
    applies for the style sheet language specified by the <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-15">style</a></code> element’s <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-style-type" id="ref-for-element-attrdef-style-type-1">type</a></code> attribute, passing it the element’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="style-data">style data</dfn>, whenever one of the following
    conditions occur: 
      <ul>
       <li data-md="">
        <p>the element is popped off the <a data-link-type="dfn" href="syntax.html#stack-of-open-elements" id="ref-for-stack-of-open-elements-2">stack of open elements</a> of an <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-5">HTML parser</a> or <a data-link-type="dfn" href="xhtml.html#xml-parser" id="ref-for-xml-parser-4">XML parser</a>,</p>
       </li><li data-md="">
        <p>the element is not on the <a data-link-type="dfn" href="syntax.html#stack-of-open-elements" id="ref-for-stack-of-open-elements-3">stack of open elements</a> of an <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-6">HTML parser</a> or <a data-link-type="dfn" href="xhtml.html#xml-parser" id="ref-for-xml-parser-5">XML parser</a>, and it is <a data-link-type="dfn" href="infrastructure.html#document-inserted-into-the-document" id="ref-for-document-inserted-into-the-document-4">inserted into a document</a> or <a data-link-type="dfn" href="infrastructure.html#document-removed-from-a-document" id="ref-for-document-removed-from-a-document-1">removed from a document</a>,</p>
       </li><li data-md="">
        <p>the element is not on the <a data-link-type="dfn" href="syntax.html#stack-of-open-elements" id="ref-for-stack-of-open-elements-4">stack of open elements</a> of an <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-7">HTML parser</a> or <a data-link-type="dfn" href="xhtml.html#xml-parser" id="ref-for-xml-parser-6">XML parser</a>, and one of its child nodes is modified by a script,</p>
      </li></ul>
      <p>For styling languages that consist of pure text (as opposed to XML), a <code>style</code> element’s <a data-link-type="dfn" href="document-metadata.html#style-data" id="ref-for-style-data-1">style data</a> is the concatenation of the contents of all the <code>Text</code> nodes that are children of the <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-16">style</a></code> element (not any other nodes such as comments
    or elements), in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-23">tree order</a>. For XML-based styling languages, the <a data-link-type="dfn" href="document-metadata.html#style-data" id="ref-for-style-data-2">style data</a> consists of all the child nodes of the <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-17">style</a></code> element.</p>
      <p>The <a data-link-type="dfn" href="document-metadata.html#update-a-style-block" id="ref-for-update-a-style-block-1">update a <code>style</code> block</a> algorithm for CSS (<code>text/css</code>) is as
    follows:</p>
      <ol>
       <li data-md="">
        <p>Let <var>element</var> be the <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-18">style</a></code> element.</p>
       </li><li data-md="">
        <p>If <var>element</var> has an <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#associated-css-style-sheet">associated CSS style sheet</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#remove-a-css-style-sheet">remove the CSS style sheet</a> in question.</p>
       </li><li data-md="">
        <p>If <var>element</var> is not <a data-link-type="dfn" href="infrastructure.html#in-the-document" id="ref-for-in-the-document-3">in a <code>Document</code></a>, then abort
these steps.</p>
       </li><li data-md="">
        <p>If the <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#should-block-inline">Should element’s inline behavior be blocked by Content Security Policy?</a> algorithm returns "<code>Blocked</code>" when executed upon the <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-19">style</a></code> element,
"<code>style</code>", and the <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-20">style</a></code> element’s <a data-link-type="dfn" href="document-metadata.html#style-data" id="ref-for-style-data-3">style data</a>, then abort these steps. <a data-link-type="biblio" href="references.html#biblio-csp3">[CSP3]</a></p>
       </li><li data-md="">
        <p><a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#create-a-css-style-sheet">create a CSS style sheet</a> with the following properties:</p>
        <dl>
         <dt data-md="">
          <p><code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-style-type" id="ref-for-element-attrdef-style-type-2">type</a></code></p>
         </dt><dd data-md="">
          <p><code>text/css</code></p>
         </dd><dt data-md="">
          <p><a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#dom-stylesheet-ownernode">owner node</a></p>
         </dt><dd data-md="">
          <p><var>element</var></p>
         </dd><dt data-md="">
          <p><code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-style-media" id="ref-for-element-attrdef-style-media-1">media</a></code></p>
         </dt><dd data-md="">
          <p>The <code>media</code> attribute of <var>element</var>.</p>
          <p class="note" role="note"> This is a reference to the (possibly absent at this time) attribute, rather than a
  copy of the attribute’s current value. The CSSOM specification defines what happens
  when the attribute is dynamically set, changed, or removed. </p>
         </dd><dt data-md="">
          <p><code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-style-title" id="ref-for-element-attrdef-style-title-2">title</a></code></p>
         </dt><dd data-md="">
          <p>The <code><a data-link-type="element-sub" href="document-metadata.html#element-attrdef-style-title" id="ref-for-element-attrdef-style-title-3">title</a></code> attribute of <var>element</var>.</p>
          <p class="note" role="note">Again, this is a <em>reference</em> to the attribute.</p>
         </dd><dt data-md="">
          <p><a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#concept-css-style-sheet-alternate-flag">alternate flag</a></p>
         </dt><dd data-md="">
          <p>Unset.</p>
         </dd><dt data-md="">
          <p><a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#concept-css-style-sheet-origin-clean-flag">origin-clean flag</a></p>
         </dt><dd data-md="">
          <p>Set.</p>
         </dd><dt data-md="">
          <p><a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#dom-stylesheet-parentstylesheet">parent CSS style sheet</a></p>
         </dt><dt data-md="">
          <p><a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#dom-cssstylesheet-ownerrule">owner CSS rule</a></p>
         </dt><dd data-md="">
          <p>null</p>
         </dd><dt data-md="">
          <p><a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#concept-css-style-sheet-disabled-flag">disabled flag</a></p>
         </dt><dd data-md="">
          <p>Left at its default value.</p>
         </dd><dt data-md="">
          <p><a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#concept-css-style-sheet-css-rules">CSS rules</a></p>
         </dt><dd data-md="">
          <p>Left uninitialized.</p>
        </dd></dl>
      </li></ol>
      <p>This specification does not define any other styling language’s <i>update a <code>style</code> block</i> algorithm.</p>
      <p>Once the attempts to obtain the style sheet’s <a data-link-type="dfn" href="infrastructure.html#critical-subresource" id="ref-for-critical-subresource-4">critical subresources</a>, if any, are
    complete, or, if the style sheet has no <a data-link-type="dfn" href="infrastructure.html#critical-subresource" id="ref-for-critical-subresource-5">critical subresources</a>, once the style sheet has
    been parsed and processed, the user agent must, if the loads were successful or there were none, <a data-link-type="dfn" href="webappapis.html#queuing" id="ref-for-queuing-4">queue a task</a> to <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-5">fire a simple event</a> named <code>load</code> at the <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-21">style</a></code> element, or, if one of the style sheet’s <a data-link-type="dfn" href="infrastructure.html#critical-subresource" id="ref-for-critical-subresource-6">critical subresources</a> failed
    to completely load for any reason (e.g., DNS error, HTTP 404 response, a connection being
    prematurely closed, unsupported Content-Type), <a data-link-type="dfn" href="webappapis.html#queuing" id="ref-for-queuing-5">queue a task</a> to <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-6">fire a simple event</a> named <code>error</code> at the <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-22">style</a></code> element. Non-network errors in processing the
    style sheet or its subresources (e.g., CSS parse errors, PNG decoding errors) are not failures
    for the purposes of this paragraph.</p>
      <p>The <a data-link-type="dfn" href="webappapis.html#task-source" id="ref-for-task-source-3">task source</a> for these <a data-link-type="dfn" href="webappapis.html#tasks" id="ref-for-tasks-4">tasks</a> is the <a data-link-type="dfn" href="webappapis.html#dom-manipulation-task-source" id="ref-for-dom-manipulation-task-source-2">DOM manipulation task source</a>.</p>
      <p>The element must <a data-link-type="dfn" href="syntax.html#delay-the-load-event" id="ref-for-delay-the-load-event-3">delay the load event</a> of the element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> until all the
    attempts to obtain the style sheet’s <a data-link-type="dfn" href="infrastructure.html#critical-subresource" id="ref-for-critical-subresource-7">critical subresources</a>, if any, are complete.</p>
     </div>
     <p class="note" role="note"> This specification does not specify a style system, but CSS is expected to be supported by most
    Web browsers. <a data-link-type="biblio" href="references.html#biblio-css-2015">[CSS-2015]</a> </p>
     <div class="impl"> The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLStyleElement" data-dfn-type="attribute" data-export="" id="dom-htmlstyleelement-media"><code>media</code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLStyleElement" data-dfn-type="attribute" data-export="" id="dom-htmlstyleelement-nonce"><code>nonce</code></dfn>, and <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLStyleElement" data-dfn-type="attribute" data-export="" id="dom-htmlstyleelement-type"><code>type</code></dfn> IDL attributes must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-14">reflect</a> the respective content
    attributes of the same name. </div>
     <p>The <code>LinkStyle</code> interface is also implemented by this element. <a data-link-type="biblio" href="references.html#biblio-cssom">[CSSOM]</a></p>
     <div class="example" id="example-d94b1376">
      <a class="self-link" href="document-metadata.html#example-d94b1376"></a> The following document has its stress emphasis styled as bright red text rather than italics
    text, while leaving titles of works and Latin words in their default italics. It shows how using
    appropriate elements enables easier restyling of documents. 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE html&gt;</span><span class="nt">&lt;html&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>My favorite book<span class="nt">&lt;/title&gt;</span>
    <span class="nt">&lt;style&gt;</span>
      <span class="nt">body</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">black</span><span class="p">;</span> <span class="k">background</span><span class="o">:</span> <span class="nb">white</span><span class="p">;</span> <span class="p">}</span>
      <span class="nt">em</span> <span class="p">{</span> <span class="k">font-style</span><span class="o">:</span> <span class="k">normal</span><span class="p">;</span> <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span> <span class="p">}</span>
    <span class="nt">&lt;/style&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;p&gt;</span>My <span class="nt">&lt;em&gt;</span>favorite<span class="nt">&lt;/em&gt;</span> book of all time has <span class="nt">&lt;em&gt;</span>got<span class="nt">&lt;/em&gt;</span> to be
    <span class="nt">&lt;cite&gt;</span>A Cat’s Life<span class="nt">&lt;/cite&gt;</span>. It is a book by P. Rahmel that talks
    about the <span class="nt">&lt;i</span> <span class="na">lang=</span><span class="s">"la"</span><span class="nt">&gt;</span>Felis Catus<span class="nt">&lt;/i&gt;</span> in modern human society.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.2.7" id="interactions-of-styling-and-scripting"><span class="secno">4.2.7. </span><span class="content">Interactions of styling and scripting</span><a class="self-link" href="document-metadata.html#interactions-of-styling-and-scripting"></a></h4>
     <p>Style sheets, whether added by a <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-26">link</a></code> element, a <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-23">style</a></code> element, an <code>&lt;?xml-stylesheet?&gt;</code> PI, an HTTP <code>Link</code> header, or some other
  mechanism, have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="style-sheet-ready">style sheet ready</dfn> flag, which is initially unset.</p>
     <p>When a style sheet is ready to be applied, its <a data-link-type="dfn" href="document-metadata.html#style-sheet-ready" id="ref-for-style-sheet-ready-1">style sheet ready</a> flag must be set. If the
  style sheet referenced no other resources (e.g., it was an internal style sheet given by a <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-24">style</a></code> element with no <code>@import</code> rules), then the style rules must be <a data-link-type="dfn" href="infrastructure.html#immediately" id="ref-for-immediately-2">immediately</a> made available to script; otherwise, the style rules must only be made
  available to script once the <a data-link-type="dfn" href="webappapis.html#event-loop" id="ref-for-event-loop-6">event loop</a> reaches its <i>update the rendering</i> step.</p>
     <p>A style sheet in the context of the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> of an <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-8">HTML parser</a> or <a data-link-type="dfn" href="xhtml.html#xml-parser" id="ref-for-xml-parser-7">XML parser</a> is
  said to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="a-style-sheet-that-is-blocking-scripts">a style sheet that is blocking scripts</dfn> if the element was created by that <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>'s parser, and the element is either a <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-25">style</a></code> element or a <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-27">link</a></code> element that
  was an <a href="links.html#link-type-stylesheet">external resource link</a> when the element was created by
  the parser, and the element’s style sheet was enabled when the element was created by the parser,
  and the element’s <a data-link-type="dfn" href="document-metadata.html#style-sheet-ready" id="ref-for-style-sheet-ready-2">style sheet ready</a> flag is not yet set, and, the last time the <a data-link-type="dfn" href="webappapis.html#event-loop" id="ref-for-event-loop-7">event loop</a> reached step 1, the element was in that <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>, and the user
  agent hasn’t given up on that particular style sheet yet. A user agent may give up on a style
  sheet at any time.</p>
     <p class="note" role="note"> Giving up on a style sheet before the style sheet loads, if the style sheet eventually does
    still load, means that the script might end up operating with incorrect information. For
    example, if a style sheet sets the color of an element to green, but a script that inspects
    the resulting style is executed before the sheet is loaded, the script will find that the
    element is black (or whatever the default color is), and might thus make poor choices (e.g.,
    deciding to use black as the color elsewhere on the page, instead of green). Implementors have
    to balance the likelihood of a script using incorrect information with the performance impact
    of doing nothing while waiting for a slow network request to finish. </p>
     <p>A <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="have a style sheet that is blocking scripts|has a style sheet that is blocking scripts" data-noexport="" id="have-a-style-sheet-that-is-blocking-scripts">has a style sheet that is blocking scripts</dfn> if there is either <a data-link-type="dfn" href="document-metadata.html#a-style-sheet-that-is-blocking-scripts" id="ref-for-a-style-sheet-that-is-blocking-scripts-1">a style sheet that is blocking scripts</a> in the context of that <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>, or
  if that <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is in a <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-22">browsing context</a> that has a <a data-link-type="dfn" href="browsers.html#parent-browsing-context" id="ref-for-parent-browsing-context-1">parent browsing context</a>, and the <a data-link-type="dfn" href="browsers.html#active-document" id="ref-for-active-document-6">active document</a> of that <a data-link-type="dfn" href="browsers.html#parent-browsing-context" id="ref-for-parent-browsing-context-2">parent browsing context</a> itself <a data-link-type="dfn" href="document-metadata.html#have-a-style-sheet-that-is-blocking-scripts" id="ref-for-have-a-style-sheet-that-is-blocking-scripts-1">has a style sheet that is blocking scripts</a>.</p>
     <p>A <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="has-no-style-sheet-that-is-blocking-scripts">has no style sheet that is blocking scripts</dfn> if it does not <a data-link-type="dfn" href="document-metadata.html#have-a-style-sheet-that-is-blocking-scripts" id="ref-for-have-a-style-sheet-that-is-blocking-scripts-2">have a style sheet that is blocking scripts</a> as defined in the previous paragraph.</p>
    </section></main>
  
<script src="js/fixup.js"></script>
  

<p class="prev_next">← <a href="semantics.html#semantics"><span class="secno">4</span> <span class="content">The elements of HTML</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="sections.html#sections"><span class="secno">4.3</span> <span class="content">Sections</span></a> →</p></body></html>
